import { Group, Rect, Text, Line } from 'react-konva';

/**
 * Placeholder for an empty template slot.
 *
 * Rendered as a dashed sky-blue rectangle with corner brackets and a
 * camera glyph + label. Visible only when the slot is unfilled
 * (`isEmpty`); once an element is assigned to the slot, the layer above
 * draws the element and the placeholder returns null.
 *
 * Interactivity
 * ─────────────
 * When an `onClick` handler is provided, the placeholder's background
 * rect listens for clicks and the Group fires onClick/onTap. The
 * decorative children (dashed-border rect, label text, corner brackets)
 * stay `listening={false}` so the visible click target is just the
 * background fill — no flicker between brackets and rect.
 *
 * Hovering over an interactive slot flips the stage cursor to `pointer`
 * so the affordance reads as clickable. Konva doesn't have a built-in
 * cursor prop for shapes; setting it via the stage container is the
 * standard pattern.
 *
 * Layer ordering
 * ──────────────
 * The parent `DesignCanvas` renders this layer BEFORE the user-elements
 * layer so that a user-placed element drawn over a slot visually
 * obscures the dashed outline and intercepts clicks first. That matches
 * user expectation: when you've put something into a slot region, you
 * want to interact with what you put there, not the slot underneath.
 */
export function SlotPlaceholder({ slot, isEmpty = true, isLoading = false, onClick }) {
  const { bounds, label } = slot;
  const { x, y, width, height } = bounds;
  if (!isEmpty) return null;

  // While loading, the slot is non-interactive and shows a spinner-style
  // overlay instead of the camera glyph. Suppressing onClick prevents
  // the user from re-triggering the picker mid-upload, and the dimmed
  // fill + "Loading…" label communicate that the click registered.
  // (S25.)
  const isInteractive = typeof onClick === 'function' && !isLoading;

  const handleMouseEnter = (e) => {
    const stage = e.target.getStage();
    if (stage) stage.container().style.cursor = 'pointer';
  };
  const handleMouseLeave = (e) => {
    const stage = e.target.getStage();
    if (stage) stage.container().style.cursor = 'default';
  };

  return (
    <Group
      name={`slot-placeholder-${slot.id}`}
      onClick={isInteractive ? onClick : undefined}
      onTap={isInteractive ? onClick : undefined}
      onMouseEnter={isInteractive ? handleMouseEnter : undefined}
      onMouseLeave={isInteractive ? handleMouseLeave : undefined}
    >
      {/* Dashed border — decorative, doesn't intercept clicks. */}
      <Rect x={x} y={y} width={width} height={height} stroke="#94a3b8" strokeWidth={2} dash={[8, 4]} cornerRadius={4} listening={false} />
      {/* Soft-fill background — the click target. Listens only when an
          onClick handler is present, so non-interactive slots don't
          shadow the Stage's deselect-on-empty-canvas behavior. The fill
          deepens slightly while loading to communicate the "working…"
          state visually. */}
      <Rect
        x={x} y={y} width={width} height={height}
        fill={isLoading ? 'rgba(56, 189, 248, 0.18)' : 'rgba(148, 163, 184, 0.1)'}
        listening={isInteractive}
      />
      {isLoading ? (
        <>
          <Text text="…" x={x + width / 2} y={y + height / 2 - 20} fontSize={28} align="center" offsetX={10} fill="#0284c7" listening={false} />
          <Text text="Loading…" x={x + width / 2} y={y + height / 2 + 10} fontSize={11} fontFamily="DM Sans" fill="#0369a1" align="center" offsetX={width / 2} listening={false} />
        </>
      ) : (
        <>
          <Text text="📷" x={x + width / 2} y={y + height / 2 - 20} fontSize={24} align="center" offsetX={12} listening={false} />
          <Text text={label || 'Drop image here'} x={x + width / 2} y={y + height / 2 + 10} fontSize={11} fontFamily="DM Sans" fill="#64748b" align="center" offsetX={width / 2} listening={false} />
        </>
      )}
      <Line points={[x, y, x + 20, y]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x, y, x, y + 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x + width, y, x + width - 20, y]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x + width, y, x + width, y + 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x, y + height, x + 20, y + height]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x, y + height, x, y + height - 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x + width, y + height, x + width - 20, y + height]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
      <Line points={[x + width, y + height, x + width, y + height - 20]} stroke="#38bdf8" strokeWidth={3} lineCap="round" listening={false} />
    </Group>
  );
}

export function SlotBoundsGuide({ slot }) {
  const { bounds, id } = slot;
  return (
    <Group name={`slot-bounds-${id}`} listening={false}>
      <Rect x={bounds.x} y={bounds.y} width={bounds.width} height={bounds.height} stroke="rgba(56, 189, 248, 0.3)" strokeWidth={1} dash={[4, 4]} cornerRadius={2} />
    </Group>
  );
}
