"use client";

import type { WidgetConfig } from "../../lib/config";
import type { SectionDef } from "../../lib/sections";
import { Check } from "../../components/WidgetFields";
import { SectionMini } from "./SectionMini";

// One strip on the floorplan, drawn roughly where it will render: its own
// miniature, its name, the move controls, and — folded away until asked for —
// the display options that belong to this section and nowhere else.
//
// The on/off control is a real checkbox rather than a close button: unchecking
// it is what sends the section to the tray, and it keeps the section reachable
// by name for both keyboard users and the e2e suite.

const BTN =
  "flex h-6 w-6 items-center justify-center rounded border border-border text-xs font-medium text-muted-foreground hover:bg-muted disabled:opacity-40";

export function SectionCard({
  def,
  config,
  row,
  cell,
  index,
  cellLength,
  cellCount,
  rowCount,
  dragging,
  onChange,
  onMove,
  onMoveCell,
  onMoveRow,
  onDragStart,
  onDragEnd,
  expanded,
  onToggleExpanded,
}: {
  def: SectionDef;
  config: WidgetConfig;
  row: number;
  cell: number;
  index: number;
  cellLength: number;
  cellCount: number;
  rowCount: number;
  dragging: boolean;
  onChange: (patch: Partial<WidgetConfig>) => void;
  onMove: (dir: -1 | 1) => void;
  onMoveCell: (dir: -1 | 1) => void;
  onMoveRow: (dir: -1 | 1) => void;
  onDragStart: () => void;
  onDragEnd: () => void;
  expanded: boolean;
  onToggleExpanded: () => void;
}) {
  return (
    <li
      data-section-card={def.id}
      draggable
      onDragStart={(e) => {
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/plain", def.id);
        onDragStart();
      }}
      onDragEnd={onDragEnd}
      className={`cursor-grab rounded-md border border-border bg-card p-2 shadow-sm motion-safe:transition ${
        dragging
          ? "opacity-60 shadow-lg motion-safe:scale-[1.02]"
          : "hover:border-border-strong"
      }`}
    >
      {/* Wraps rather than truncates: in a multi-track board there isn't room
          for the name and the move controls on one line, and the name is the
          part you can't do without. */}
      <div className="flex flex-wrap items-start gap-x-2 gap-y-1">
        <div className="flex min-w-[7rem] flex-1 flex-col gap-1">
          <div className="flex items-center gap-2">
            <span
              aria-hidden
              title="Drag to move"
              className="select-none text-sm leading-none text-muted-foreground/60"
            >
              ⠿
            </span>
            <SectionMini id={def.id} />
            <label className="flex min-w-0 items-center gap-2">
              <input
                type="checkbox"
                checked
                onChange={() => onChange(def.setEnabled(false))}
                title={`Turn off ${def.label}`}
                className="h-4 w-4 shrink-0"
              />
              <span className="text-sm font-medium">{def.label}</span>
            </label>
          </div>
          <p className="pl-6 text-xs text-muted-foreground">{def.hint}</p>
        </div>
        <div className="ml-auto flex shrink-0 items-center gap-1">
          <button
            type="button"
            className={BTN}
            disabled={index === 0}
            onClick={() => onMove(-1)}
            aria-label={`Move ${def.label} up`}
            title="Move up"
          >
            ↑
          </button>
          <button
            type="button"
            className={BTN}
            disabled={index === cellLength - 1}
            onClick={() => onMove(1)}
            aria-label={`Move ${def.label} down`}
            title="Move down"
          >
            ↓
          </button>
          {cellCount > 1 && (
            <>
              <button
                type="button"
                className={BTN}
                disabled={cell === 0}
                onClick={() => onMoveCell(-1)}
                aria-label={`Move ${def.label} left`}
                title="Move to the previous cell in this row"
              >
                ◀
              </button>
              <button
                type="button"
                className={BTN}
                disabled={cell === cellCount - 1}
                onClick={() => onMoveCell(1)}
                aria-label={`Move ${def.label} right`}
                title="Move to the next cell in this row"
              >
                ▶
              </button>
            </>
          )}
          {/* Rows are the new dimension, so they need their own pair — every
              drag has to stay reachable from the keyboard, which is what the
              arrows on this card have always been for. */}
          {rowCount > 1 && (
            <>
              <button
                type="button"
                className={BTN}
                disabled={row === 0}
                onClick={() => onMoveRow(-1)}
                aria-label={`Move ${def.label} to the row above`}
                title="Move to the row above"
              >
                ▲
              </button>
              <button
                type="button"
                className={BTN}
                disabled={row === rowCount - 1}
                onClick={() => onMoveRow(1)}
                aria-label={`Move ${def.label} to the row below`}
                title="Move to the row below"
              >
                ▼
              </button>
            </>
          )}
          {def.options.length > 0 && (
            <button
              type="button"
              className={BTN}
              onClick={onToggleExpanded}
              aria-expanded={expanded}
              aria-label={`Options for ${def.label}`}
              title={`${def.options.length} display ${
                def.options.length === 1 ? "option" : "options"
              }`}
            >
              <span
                aria-hidden
                className={`leading-none motion-safe:transition-transform ${
                  expanded ? "rotate-180" : ""
                }`}
              >
                ⌄
              </span>
            </button>
          )}
        </div>
      </div>
      {expanded && def.options.length > 0 && (
        <div className="mt-2 flex flex-col gap-1.5 border-t border-border pl-6 pt-2">
          {def.options.map((o) => (
            <Check
              key={o.key}
              label={o.label}
              hint={o.hint}
              checked={config[o.key]}
              onChange={(v) => onChange({ [o.key]: v } as Partial<WidgetConfig>)}
            />
          ))}
        </div>
      )}
    </li>
  );
}