Sheet grid

"use client";
import * as React from "react";
import { SheetGrid, type SheetColumn } from "@/components/ui/notchset/blocks/sheet-grid";
import { StatusGlyph, type TaskStatus } from "@/components/ui/notchset/status-glyph";

type Row = { id: string; title: string; status: TaskStatus; owner: string; due: string; size: string; children?: number; expanded?: boolean; depth?: number };
const START: Row[] = [
  { id: "RP-58", title: "Batch-optimise 40+ stops in under two seconds", status: "doing", owner: "Maya", due: "Thu", size: "L", children: 2 },
  { id: "RP-60", title: "Explain why a stop moved", status: "todo", owner: "Ruth", due: "Oct 27", size: "M" },
  { id: "RP-61", title: "Dispatcher override reason picker", status: "todo", owner: "Ines", due: "Oct 28", size: "S" },
  { id: "RP-50", title: "Snap stops to the road network", status: "review", owner: "Tomás", due: "Thu", size: "M" },
];
const NEXT: Record<TaskStatus, TaskStatus> = { backlog: "todo", todo: "doing", doing: "review", review: "done", done: "todo", cancelled: "todo" };
const WORD: Record<TaskStatus, string> = { backlog: "Backlog", todo: "To do", doing: "In progress", review: "In review", done: "Done", cancelled: "Cancelled" };

export default function SheetGridDemo() {
  const [rows, setRows] = React.useState(START);
  const [widths, setWidths] = React.useState<Record<string, number>>({ title: 300, status: 130, owner: 110, due: 96, size: 70 });
  const [sort, setSort] = React.useState<"asc" | null>(null);
  const set = (id: string, p: Partial<Row>) => setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...p } : r)));
  const sub = ({ children: _c, expanded: _e, ...r }: Row, n: number, title: string): Row => ({ ...r, id: `${r.id}#${n}`, title, depth: 1 });
  const shown = (sort ? [...rows].sort((a, b) => a.title.localeCompare(b.title)) : rows).flatMap((r) => [r, ...(r.expanded ? [sub(r, 1, "Cache the distance matrix per day"), sub(r, 2, "Budget test: under 2s on CI")] : [])]);
  const columns: SheetColumn<Row>[] = [
    { key: "title", label: "Task", width: widths.title!, min: 180, text: (r) => r.title, onCommit: (r, v) => set(r.id, { title: v }), sort, onSort: () => setSort(sort ? null : "asc"), cell: (r) => <span className="truncate">{r.title}</span> },
    { key: "status", label: "Status", width: widths.status!, cell: (r) => (r.depth ? null : <button type="button" tabIndex={-1} onClick={() => set(r.id, { status: NEXT[r.status] })} className="flex cursor-pointer items-center gap-1.5"><StatusGlyph status={r.status} label={r.title} />{WORD[r.status]}</button>) },
    { key: "owner", label: "Owner", width: widths.owner!, text: (r) => r.owner, onCommit: (r, v) => set(r.id, { owner: v }), cell: (r) => r.owner },
    { key: "due", label: "Due", width: widths.due!, cell: (r) => r.due },
    { key: "size", label: "Size", width: widths.size!, align: "end", cell: (r) => r.size },
  ];
  return (
    <div className="flex w-full max-w-[760px] flex-col gap-2">
      <SheetGrid<Row> label="Tasks as a table" rows={shown} columns={columns} onToggle={(r) => set(r.id, { expanded: !r.expanded })} onResize={(k, w) => setWidths((x) => ({ ...x, [k]: w }))} className="max-h-[300px] rounded-[var(--ns-radius-lg)] shadow-[0_0_0_1px_var(--ns-line)]" />
      <span className="text-[length:var(--ns-text-meta)] text-[var(--ns-ink-3)]">Click a cell, then arrows, Enter to edit, Esc to put it back; Enter on Status cycles it.</span>
    </div>
  );
}