"use client";

import { Fragment, useState } from "react";
import type { WidgetConfig } from "../../lib/config";
import {
  MAX_COLUMNS,
  MAX_ROWS,
  addCell,
  insertAt,
  moveToCell,
  moveToRow,
  moveWithin,
  reconcileLayout,
  removeCell,
  setCellFlow,
  setCellSpan,
  setColumnCount,
  setRowCount,
  setRowSize,
} from "../../lib/placement";
import { SECTIONS, SECTION_BY_ID, type SectionId } from "../../lib/sections";
import { SectionCard } from "./SectionCard";
import { SectionMini } from "./SectionMini";

// The floorplan: a scale model of the widget, laid out in the same grid it will
// render in — the same tracks, the same rows, the same spans. Drag a card to
// move it; the tray underneath holds the sections that are switched off.
//
// The board's one bold element is the LEFT RAIL, one control per row drawn as
// its height: a hairline box for `auto`, a tall box with a spring mark for
// `fill`. That is where the dimension the columns model never had actually
// lives, so it is the one thing here allowed to look like something. Everything
// else stays hairlines on `surface` and `card`.
//
// Native HTML5 drag-and-drop, deliberately — it costs no dependency, and the
// arrow buttons on every card cover keyboard use (and touch, which HTML5 drag
// does not support) so nothing here is mouse-only.

// Below this a track is too narrow for the strips inside it to read.
const NARROW_PX = 150;

// Literal classes, because Tailwind reads the source. The `@max-[24rem]`
// overrides are on the BOARD's own container query, not the viewport's, so the
// board folds identically inside the widget's ~320px menu overlay and on the
// builder page.
const BOARD_COLS: Record<number, string> = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-4",
  5: "grid-cols-5",
  6: "grid-cols-6",
};

const BOARD_SPAN: Record<number, string> = {
  1: "col-span-1",
  2: "col-span-2",
  3: "col-span-3",
  4: "col-span-4",
  5: "col-span-5",
  6: "col-span-6",
};

const STACKED = "@max-[24rem]:grid-cols-1";
const STACKED_CELL = "@max-[24rem]:col-span-1";

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

export function LayoutBoard({
  config,
  onChange,
  previewWidth,
}: {
  config: WidgetConfig;
  onChange: (patch: Partial<WidgetConfig>) => void;
  // The width the widget will actually be. Absent inside the widget's own menu,
  // where the px readouts are noise in a 320px overlay.
  previewWidth?: number;
}) {
  const [draggingId, setDraggingId] = useState<SectionId | null>(null);
  const [drop, setDrop] = useState<{
    row: number;
    cell: number;
    index: number;
  } | null>(null);
  const [expanded, setExpanded] = useState<SectionId[]>([]);

  const layout = config.layout;
  const off = SECTIONS.filter((s) => !s.enabled(config));

  // The widget's padding (p-2 either side) and the gaps between tracks come out
  // of the width before it is split, so this is the real number.
  const trackPx =
    previewWidth === undefined
      ? null
      : Math.round(
          (previewWidth - 16 - (layout.cols - 1) * 12) / layout.cols,
        );

  function toggleExpanded(id: SectionId) {
    setExpanded((e) => (e.includes(id) ? e.filter((x) => x !== id) : [...e, id]));
  }

  function clearDrag() {
    setDraggingId(null);
    setDrop(null);
  }

  // Put a section at an explicit slot, switching it on first if it was in the
  // tray. Both halves go out as one patch so the layout is never briefly
  // inconsistent with the flags.
  function place(id: SectionId, row: number, cell: number, index: number) {
    const def = SECTION_BY_ID[id];
    const flagPatch = def.enabled(config) ? {} : def.setEnabled(true);
    const nextFlags = { ...config, ...flagPatch };
    const base = reconcileLayout(layout, nextFlags);
    onChange({ ...flagPatch, layout: insertAt(base, id, row, cell, index) });
  }

  // Where a drop at this pointer position would land: the first card whose
  // midpoint is below the cursor, or the end of the cell.
  function indexFromPointer(cellEl: HTMLElement, clientY: number): number {
    const cards = Array.from(
      cellEl.querySelectorAll<HTMLElement>("[data-section-card]"),
    );
    for (let i = 0; i < cards.length; i++) {
      const r = cards[i].getBoundingClientRect();
      if (clientY < r.top + r.height / 2) return i;
    }
    return cards.length;
  }

  const lastRow = layout.rows.length - 1;
  const lastCellOfLastRow = layout.rows[lastRow].cells.length - 1;

  return (
    <div className="@container flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium">Columns</span>
          <div className="flex gap-1">
            {Array.from({ length: MAX_COLUMNS }, (_, i) => i + 1).map((n) => (
              <button
                key={n}
                type="button"
                aria-label={`${n} column${n === 1 ? "" : "s"}`}
                aria-pressed={layout.cols === n}
                onClick={() => onChange({ layout: setColumnCount(layout, n) })}
                className={`h-7 w-7 rounded border text-xs font-medium ${
                  layout.cols === n
                    ? "border-primary bg-primary text-primary-foreground"
                    : "border-border hover:bg-muted"
                }`}
              >
                {n}
              </button>
            ))}
          </div>
        </div>
        <p className="text-xs text-muted-foreground">
          Drag a section to move it, or use the arrows on each card. The rail on
          the left sets each row&apos;s height.
        </p>
      </div>

      {/* The board itself sits on `surface` so it reads as a canvas the `card`
          strips are resting on, rather than more of the page. */}
      <div className="rounded-lg border border-border bg-surface p-3">
        {/* Top ruler: one entry per grid track, carrying the width it gets. */}
        {trackPx !== null && (
          <div className="mb-1.5 flex gap-1.5">
            <div aria-hidden className="w-9 shrink-0" />
            <div className={`grid flex-1 gap-1.5 ${BOARD_COLS[layout.cols]} ${STACKED}`}>
              {Array.from({ length: layout.cols }, (_, i) => (
                <div
                  key={i}
                  className="flex items-baseline justify-between gap-2 px-0.5"
                >
                  <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                    {layout.cols === 1 ? "Width" : `Col ${i + 1}`}
                  </span>
                  <span
                    className={`text-xs tabular-nums ${
                      trackPx < NARROW_PX
                        ? "text-warning"
                        : "text-muted-foreground/70"
                    }`}
                    title={
                      trackPx < NARROW_PX
                        ? "Too narrow for these strips to read at the current preview size"
                        : "Width this track gets at the current preview size"
                    }
                  >
                    {trackPx}px
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="flex flex-col gap-1.5">
          {layout.rows.map((row, ri) => (
            <div key={ri} className="flex gap-1.5">
              <RowHeightButton
                index={ri}
                size={row.size}
                onToggle={() =>
                  onChange({
                    layout: setRowSize(
                      layout,
                      ri,
                      row.size === "fill" ? "auto" : "fill",
                    ),
                  })
                }
              />
              <div
                className={`grid flex-1 gap-1.5 ${BOARD_COLS[layout.cols]} ${STACKED}`}
              >
                {row.cells.map((cell, ci) => (
                  <div
                    key={ci}
                    className={`flex min-w-0 flex-col gap-1 rounded-md border p-1 ${
                      BOARD_SPAN[cell.span] ?? "col-span-1"
                    } ${STACKED_CELL} ${
                      cell.sections.length === 0
                        ? "border-dashed border-border"
                        : "border-border/60"
                    }`}
                  >
                    <div className="flex items-center gap-1">
                      {layout.cols > 1 && (
                        <>
                          <button
                            type="button"
                            className={CHIP}
                            disabled={cell.span <= 1}
                            aria-label={`Narrow row ${ri + 1} cell ${ci + 1}`}
                            title="Narrow this cell by one track"
                            onClick={() =>
                              onChange({
                                layout: setCellSpan(layout, ri, ci, cell.span - 1),
                              })
                            }
                          >
                            ◀
                          </button>
                          <button
                            type="button"
                            className={CHIP}
                            disabled={cell.span >= layout.cols}
                            aria-label={`Widen row ${ri + 1} cell ${ci + 1}`}
                            title="Widen this cell by one track — it swallows the cell beside it"
                            onClick={() =>
                              onChange({
                                layout: setCellSpan(layout, ri, ci, cell.span + 1),
                              })
                            }
                          >
                            ▶
                          </button>
                        </>
                      )}
                      <button
                        type="button"
                        aria-label={`Row ${ri + 1} cell ${ci + 1} flow`}
                        aria-pressed={cell.flow === "row"}
                        title={
                          cell.flow === "row"
                            ? "A dense rail: one line, shared border, shortened labels"
                            : "A stack: each section on its own"
                        }
                        onClick={() =>
                          onChange({
                            layout: setCellFlow(
                              layout,
                              ri,
                              ci,
                              cell.flow === "row" ? "col" : "row",
                            ),
                          })
                        }
                        className={`${CHIP} ${
                          cell.flow === "row"
                            ? "border-border-strong bg-muted text-foreground"
                            : ""
                        }`}
                      >
                        {cell.flow === "row" ? "⇄" : "⇅"}
                      </button>
                      <span className="ml-auto text-[10px] tabular-nums text-muted-foreground/60">
                        {cell.span}/{layout.cols}
                      </span>
                      {row.cells.length > 1 && (
                        <button
                          type="button"
                          className={CHIP}
                          aria-label={`Remove cell ${ci + 1} from row ${ri + 1}`}
                          title="Remove this cell; anything in it moves next door"
                          onClick={() =>
                            onChange({ layout: removeCell(layout, ri, ci) })
                          }
                        >
                          ✕
                        </button>
                      )}
                    </div>
                    <ul
                      onDragOver={(e) => {
                        if (!draggingId) return;
                        e.preventDefault();
                        e.dataTransfer.dropEffect = "move";
                        const index = indexFromPointer(e.currentTarget, e.clientY);
                        setDrop((d) =>
                          d && d.row === ri && d.cell === ci && d.index === index
                            ? d
                            : { row: ri, cell: ci, index },
                        );
                      }}
                      onDrop={(e) => {
                        if (!draggingId) return;
                        e.preventDefault();
                        place(
                          draggingId,
                          ri,
                          ci,
                          indexFromPointer(e.currentTarget, e.clientY),
                        );
                        clearDrag();
                      }}
                      className="flex min-h-16 flex-col gap-1.5 rounded p-1"
                    >
                      {cell.sections.map((id, index) => (
                        <Fragment key={id}>
                          <DropLine
                            active={
                              drop?.row === ri &&
                              drop.cell === ci &&
                              drop.index === index
                            }
                          />
                          <SectionCard
                            def={SECTION_BY_ID[id]}
                            config={config}
                            row={ri}
                            cell={ci}
                            index={index}
                            cellLength={cell.sections.length}
                            cellCount={row.cells.length}
                            rowCount={layout.rows.length}
                            dragging={draggingId === id}
                            onChange={onChange}
                            onMove={(dir) =>
                              onChange({
                                layout: moveWithin(layout, ri, ci, index, dir),
                              })
                            }
                            onMoveCell={(dir) =>
                              onChange({
                                layout: moveToCell(layout, ri, ci, index, dir),
                              })
                            }
                            onMoveRow={(dir) =>
                              onChange({
                                layout: moveToRow(layout, ri, ci, index, dir),
                              })
                            }
                            onDragStart={() => setDraggingId(id)}
                            onDragEnd={clearDrag}
                            expanded={expanded.includes(id)}
                            onToggleExpanded={() => toggleExpanded(id)}
                          />
                        </Fragment>
                      ))}
                      <DropLine
                        active={
                          drop?.row === ri &&
                          drop.cell === ci &&
                          drop.index === cell.sections.length
                        }
                      />
                      {cell.sections.length === 0 && (
                        <li className="px-1 py-3 text-center text-xs text-muted-foreground/70">
                          Empty — drop a section here
                        </li>
                      )}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* The rail's foot: the row and cell lifecycle, kept together so adding
            a place to put something is one gesture away from the rail that
            sizes it. */}
        <div className="mt-2 flex flex-wrap items-center gap-1.5">
          <button
            type="button"
            className={CHIP}
            aria-label="Add a row"
            title="Add a row below"
            disabled={layout.rows.length >= MAX_ROWS}
            onClick={() =>
              onChange({ layout: setRowCount(layout, layout.rows.length + 1) })
            }
          >
            + Row
          </button>
          <button
            type="button"
            className={CHIP}
            aria-label="Remove the last row"
            title="Remove the last row; anything in it moves up"
            disabled={layout.rows.length <= 1}
            onClick={() =>
              onChange({ layout: setRowCount(layout, layout.rows.length - 1) })
            }
          >
            − Row
          </button>
          <button
            type="button"
            className={CHIP}
            aria-label={`Add a cell to row ${lastRow + 1}`}
            title="Split the last row into another cell"
            disabled={
              layout.rows[lastRow].cells.length >= layout.cols ||
              lastCellOfLastRow < 0
            }
            onClick={() => onChange({ layout: addCell(layout, lastRow) })}
          >
            + Cell
          </button>
        </div>
      </div>

      <div
        onDragOver={(e) => {
          if (!draggingId) return;
          e.preventDefault();
          e.dataTransfer.dropEffect = "move";
          setDrop(null);
        }}
        onDrop={(e) => {
          if (!draggingId) return;
          e.preventDefault();
          onChange(SECTION_BY_ID[draggingId].setEnabled(false));
          clearDrag();
        }}
        className="flex flex-wrap items-center gap-2 rounded-lg border border-dashed border-border p-2"
      >
        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
          Off
        </span>
        {off.length === 0 ? (
          <span className="text-xs text-muted-foreground/70">
            Every section is on the board.
          </span>
        ) : (
          // Same checkbox as on the card, deliberately: a section is one
          // control that changes place, not two that appear and disappear —
          // which is what makes it findable by name whether it is on or off.
          off.map((s) => (
            <label
              key={s.id}
              draggable
              onDragStart={(e) => {
                e.dataTransfer.effectAllowed = "move";
                e.dataTransfer.setData("text/plain", s.id);
                setDraggingId(s.id);
              }}
              onDragEnd={clearDrag}
              title={s.hint}
              className="flex cursor-grab items-center gap-1.5 rounded-full border border-border bg-card py-1 pl-2 pr-3 text-xs hover:border-border-strong hover:bg-muted"
            >
              <input
                type="checkbox"
                checked={false}
                onChange={() =>
                  place(
                    s.id,
                    lastRow,
                    lastCellOfLastRow,
                    layout.rows[lastRow].cells[lastCellOfLastRow].sections.length,
                  )
                }
                className="h-3.5 w-3.5"
              />
              <SectionMini id={s.id} />
              <span>{s.label}</span>
            </label>
          ))
        )}
        {draggingId !== null && (
          <span className="text-xs text-muted-foreground">
            Drop here to switch off.
          </span>
        )}
      </div>
    </div>
  );
}

// The signature control: a row's height, drawn as its height. `auto` is a short
// hairline box; `fill` is a tall one carrying a vertical spring mark, which is
// the only place on the board that spends any ink.
function RowHeightButton({
  index,
  size,
  onToggle,
}: {
  index: number;
  size: "auto" | "fill";
  onToggle: () => void;
}) {
  const fill = size === "fill";
  return (
    <button
      type="button"
      aria-label={`Row ${index + 1} height`}
      aria-pressed={fill}
      onClick={onToggle}
      title={
        fill
          ? "Fills the widget's leftover height; sections inside it scroll. Click for content height."
          : "Content height, like every row before rows existed. Click to make it fill."
      }
      className={`flex w-9 shrink-0 flex-col items-center justify-center gap-1 self-stretch rounded-md border text-[10px] uppercase tracking-wide motion-safe:transition-colors ${
        fill
          ? "border-primary bg-primary/10 text-primary"
          : "border-border text-muted-foreground/70 hover:bg-muted"
      }`}
    >
      <span
        aria-hidden
        className={`block w-4 rounded-sm border ${
          fill
            ? "h-8 border-primary bg-[repeating-linear-gradient(180deg,transparent_0_3px,currentColor_3px_4px)]"
            : "h-2 border-current"
        }`}
      />
      {fill ? "fill" : "auto"}
    </button>
  );
}

// The insertion marker. Always in the DOM at every slot so the list doesn't
// reflow as it moves between them — only its color changes.
function DropLine({ active }: { active: boolean }) {
  return (
    <li
      aria-hidden
      className={`h-0.5 rounded-full motion-safe:transition-colors ${
        active ? "bg-primary" : "bg-transparent"
      }`}
    />
  );
}