/** The column board — records as cards in stage columns, moved by drag or menu. */
import { useMemo, useState } from "react";
import { Avatar } from "@lotics/ui/avatar";
import { Board, BoardCard, BoardColumn } from "@lotics/ui/board";
import { Box } from "@lotics/ui/box";
import { Button } from "@lotics/ui/button";
import { colors } from "@lotics/ui/colors";
import { daysUntil, deadlineAnnotation } from "@lotics/ui/deadline";
import { Drawer, DrawerScrollArea } from "@lotics/ui/drawer";
import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
import { FilterChip } from "@lotics/ui/filter_chip";
import { MemberChip } from "@lotics/ui/member_chip";
import { Status } from "@lotics/ui/status";
import { OptionList } from "@lotics/ui/option_list";
import { Stack } from "@lotics/ui/stack";
import { TotalsLine } from "@lotics/ui/totals_line";
import { Text } from "@lotics/ui/text";
import { TextInput } from "@lotics/ui/text_input";

/**
 * THE column board — a surface whose subject is ADVANCING work between piles.
 *
 * ## Why this is not a grid of the same work
 *
 * They look adjacent and they are not. A `DataGrid` is bands of ROWS with a
 * field in every cell, for a reader who is COMPARING work and correcting it — a
 * deadline here, an owner there. Nothing moves; the grid is a spreadsheet with
 * opinions.
 *
 * This shape exists for the opposite act. The columns ARE the stages, the pile
 * sizes are themselves the report, and the only thing the reader does is send a
 * card onward. Reach for it when the question is *"what is stuck, and what moves
 * next?"* rather than *"which of these is wrong?"*.
 *
 * Getting this backwards is not hypothetical: an app hand-rolled a 280px column
 * because a reviewer read a template's NAME and told its author the kit already
 * shipped a board. It did not. Read a template's source, never its name.
 *
 * ## What a board owes its reader
 *
 * - **The move is reachable by KEYBOARD.** Every card carries a control whose
 *   items name their destinations, so advancing work never requires a pointer.
 *   Drag is layered on the same declared list — the grip drags, the drop
 *   hit-tests the column under the pointer and is refused unless the card
 *   already declared it, so the two paths cannot disagree about what is legal.
 * - **A column states its size as a PROP.** Never formatted into the label: the
 *   count is what makes a pile a report, and a number inside a heading is a
 *   second copy that goes stale.
 * - **The BOARD scrolls sideways, never the page.** A wide shape earns its place
 *   by owning its own overflow; a page that scrolls horizontally has lost its
 *   left edge.
 * - **A card is a DOOR.** Pressing it opens the record, exactly as a register
 *   row does — the board is another way into the same surface, never a second
 *   one. What a card SHOWS is the minimum for deciding whether to move it.
 */

type Stage = "intake" | "review" | "approved" | "issued";

interface Doc {
  id: string;
  title: string;
  ref: string;
  owner: string;
  due: string | null;
  stage: Stage;
}

const STAGES: { key: Stage; label: string; color: "zinc" | "amber" | "blue" | "emerald" }[] = [
  { key: "intake", label: "Received", color: "zinc" },
  { key: "review", label: "In review", color: "amber" },
  { key: "approved", label: "Approved", color: "blue" },
  { key: "issued", label: "Issued", color: "emerald" },
];

const SEED: Doc[] = [
  { id: "d1", title: "Carrier rate agreement 2026", ref: "DOC-2026-0041", owner: "Alice Rowan", due: "2026-08-24", stage: "intake" },
  { id: "d2", title: "Warehouse lease — Bay 4", ref: "DOC-2026-0042", owner: "Martin Vogel", due: "2026-09-02", stage: "intake" },
  { id: "d3", title: "Customs power of attorney", ref: "DOC-2026-0043", owner: "Ruth Adeyemi", due: null, stage: "intake" },
  { id: "d4", title: "Insurance renewal — fleet", ref: "DOC-2026-0038", owner: "Alice Rowan", due: "2026-08-28", stage: "review" },
  { id: "d5", title: "Subcontractor NDA", ref: "DOC-2026-0039", owner: "Lena Ferrer", due: "2026-09-15", stage: "review" },
  { id: "d6", title: "Port handling addendum", ref: "DOC-2026-0035", owner: "Martin Vogel", due: "2026-09-08", stage: "approved" },
  { id: "d7", title: "Annual safety declaration", ref: "DOC-2026-0031", owner: "Ruth Adeyemi", due: "2026-08-19", stage: "issued" },
  { id: "d8", title: "Depot access permit", ref: "DOC-2026-0029", owner: "Lena Ferrer", due: "2026-10-01", stage: "issued" },
];

const OWNERS = [...new Set(SEED.map((d) => d.owner))].map((o) => ({ value: o, label: o }));

/** The template's "now", so the countdowns are stable in a gallery. */
const NOW = new Date("2026-08-30T00:00:00Z");
const DEADLINE_WORDS = {
  overdue: (d: number) => `${d} day${d === 1 ? "" : "s"} overdue`,
  today: "Due today",
  tomorrow: "Due tomorrow",
  inDays: (d: number) => `${d} days left`,
};
/** One helper, so a card and the record it opens cannot word the same date
 *  differently — the annotation carries its own tone with it. */
const dueProps = (iso: string, done: boolean) =>
  done ? { color: "muted" as const, children: "Issued" } : (() => {
    const a = deadlineAnnotation(daysUntil(new Date(iso), NOW), DEADLINE_WORDS);
    const text = a.error ?? a.warning ?? a.description ?? "";
    const color: "danger" | "warning" | "muted" = a.error ? "danger" : a.warning ? "warning" : "muted";
    return { color, children: text };
  })();

export function TplBoard() {
  const [docs, setDocs] = useState(SEED);
  const [query, setQuery] = useState("");
  const [owners, setOwners] = useState<string[]>([]);
  const [open, setOpen] = useState<string | null>(null);

  const shown = useMemo(() => {
    const q = query.trim().toLowerCase();
    return docs.filter(
      (d) =>
        (!q || d.title.toLowerCase().includes(q) || d.ref.toLowerCase().includes(q)) &&
        (owners.length === 0 || owners.includes(d.owner)),
    );
  }, [docs, query, owners]);

  const move = (id: string, to: string) =>
    setDocs((all) => all.map((d) => (d.id === id ? { ...d, stage: to as Stage } : d)));

  const record = docs.find((d) => d.id === open) ?? null;
  const overdue = shown.filter((d) => d.due != null && d.due < "2026-08-30" && d.stage !== "issued").length;

  return (
    <>
      {/* The CANVAS — a full-bleed scroller on the page ground, its content
          inset by the canvas padding. `flexShrink: 0` on the content is what
          keeps a scroller scrolling: a flex child shrinks to its parent by
          default, and a content box squeezed to the viewport has nothing left
          to scroll. */}
      <Box style={{ flex: 1, minHeight: 0, overflowX: "hidden", overflowY: "auto", background: colors.background }}>
        <Box style={{ flexShrink: 0, padding: "28px 24px 96px" }}>
          <Stack gap={16} style={{ maxWidth: 1240, width: "100%", alignSelf: "center" }}>
            <Text size="xxl" weight="semibold">
              Document approvals
            </Text>

            {/* Search leftmost, then the facets — the same toolbar order a register
                uses, because the board is a VIEW of the same population and the
                reader should not relearn where the search box lives. */}
            <Stack direction="row" wrap align="center" gap={8}>
              <Box style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
                <TextInput type="search" value={query} onValueChange={setQuery} placeholder="Search documents…" accessibilityLabel="Search documents" />
              </Box>
              <FilterChip
                label="Owner"
                summary={owners.length > 0 ? <Stack direction="row" gap="none" style={{ gap: 2 }}>{owners.slice(0, 4).map((o) => <Avatar key={o} name={o} size="sm" />)}</Stack> : undefined}
                onClear={() => setOwners([])}
                clearLabel="Clear owner filter"
              >
                <OptionList
                  multi
                  search={{ mode: "none" }}
                  options={OWNERS}
                  value={owners}
                  onValueChange={setOwners}
                  renderOptionContent={(o) => <MemberChip name={o.label ?? o.value} size="sm" />}
                />
              </FilterChip>
            </Stack>

            {/* What is AT STAKE, not how many rows there are: the columns already
                state their own sizes, so repeating the count here would be one
                fact printed twice a few pixels apart. */}
            <TotalsLine
              items={[
                { label: "awaiting a decision", value: shown.filter((d) => d.stage === "intake" || d.stage === "review").length },
                ...(overdue > 0 ? [{ label: "past their date", value: overdue, tone: "warning" as const }] : []),
              ]}
            />

            <Board>
              {STAGES.map((s) => {
                const inStage = shown.filter((d) => d.stage === s.key);
                return (
                  <BoardColumn
                    key={s.key}
                    columnKey={s.key}
                    /* The heading is the component the value's data role owns — a
                       stage is a status, so it wears the same Status the
                       record surface uses for it. Two surfaces, one vocabulary. */
                    heading={<Status variant="dot" option={{ key: s.key, label: s.label, color: s.color }} />}
                    count={inStage.length}
                    emptyMessage="Nothing at this stage"
                  >
                    {inStage.map((d) => (
                      <BoardCard
                        key={d.id}
                        id={d.id}
                        title={d.title}
                        onPress={() => setOpen(d.id)}
                        /* Every stage but this one. Declaring them on the card is
                           what makes the keyboard menu and the drop target agree —
                           the drag resolves against this same list. */
                        moves={STAGES.filter((x) => x.key !== s.key).map((x) => ({ key: x.key, label: x.label }))}
                        onMove={(to) => move(d.id, to)}
                      >
                        <MemberChip name={d.owner} size="sm" />
                        {/* The date and its countdown in ONE run, in the kit's
                            deadline tone — a card is read at a glance, and a
                            separate badge for "late" would say twice what the
                            annotation already says once. */}
                        {d.due ? (
                          <Text size="xs" {...dueProps(d.due, d.stage === "issued")} />
                        ) : (
                          <Text size="xs" color="muted">
                            No date
                          </Text>
                        )}
                      </BoardCard>
                    ))}
                  </BoardColumn>
                );
              })}
            </Board>
          </Stack>
        </Box>
      </Box>

      {/* A card is a door into the SAME record surface a register would open —
          never a second detail view built for the board. */}
      <Drawer open={record != null} onOpenChange={(v) => !v && setOpen(null)} title={record?.title}>
        {record ? (
          <DrawerScrollArea>
              <DetailTable labelWidth={140}>
                <DetailRow label="Reference">
                  <Text size="sm">{record.ref}</Text>
                </DetailRow>
                <DetailRow label="Stage">
                  <Status variant="dot" option={{ key: record.stage, label: STAGES.find((s) => s.key === record.stage)?.label ?? record.stage, color: STAGES.find((s) => s.key === record.stage)?.color ?? "zinc" }} />
                </DetailRow>
                <DetailRow label="Owner">
                  <MemberChip name={record.owner} />
                </DetailRow>
                <DetailRow label="Due">
                  {record.due ? <Text size="sm" {...dueProps(record.due, record.stage === "issued")} /> : <Text size="sm" color="muted">No date</Text>}
                </DetailRow>
              </DetailTable>
              {/* The same act the card offers, in reach of the person who opened
                  it — a reader who drilled in should not have to go back out to
                  advance the thing they just read. */}
              <Stack direction="row" wrap gap={8} style={{ paddingTop: 16 }}>
                {STAGES.filter((s) => s.key !== record.stage).map((s) => (
                  <Button
                    key={s.key}
                    color="secondary"
                    title={`Move to ${s.label}`}
                    onPress={() => {
                      move(record.id, s.key);
                      setOpen(null);
                    }}
                  />
                ))}
              </Stack>
          </DrawerScrollArea>
        ) : null}
      </Drawer>
    </>
  );
}