Task calendar

"use client";
import * as React from "react";
import { StatusGlyph } from "@/components/ui/notchset/status-glyph";
import { TaskCalendar } from "@/components/ui/notchset/blocks/task-calendar";

/* October 2026 for a fictional project; the 20th is today. */
const KEYS = Array.from({ length: 35 }, (_, i) => new Date(Date.UTC(2026, 8, 28 + i)).toISOString().slice(0, 10));
const START: Record<string, { id: string; title: string; done?: boolean; late?: boolean }[]> = {
  "2026-10-16": [{ id: "RP-44", title: "Load test the optimiser", done: true }],
  "2026-10-17": [{ id: "RP-59", title: "Write the v1 to v2 migration plan", late: true }],
  "2026-10-20": [{ id: "RP-57", title: "Undo for route edits" }],
  "2026-10-22": [{ id: "RP-50", title: "Snap stops to the road network" }],
};

export default function TaskCalendarDemo() {
  const [by, setBy] = React.useState(START);
  const [open, setOpen] = React.useState<string | null>(null);
  return (
    <div className="flex w-full flex-col gap-2">
      <TaskCalendar
        label="Route planner v2, October 2026"
        days={KEYS.map((k) => ({
          key: k,
          day: +k.slice(8),
          label: k,
          today: k === "2026-10-20",
          outside: k.slice(5, 7) !== "10",
          tasks: (by[k] ?? []).map((t) => ({ ...t, glyph: <StatusGlyph status={t.done ? "done" : "todo"} label={t.title} size={12} /> })),
        }))}
        onOpen={setOpen}
        onMove={(id, to) => {
          const from = Object.keys(by).find((k) => by[k]!.some((t) => t.id === id));
          if (!from) return false;
          const t = by[from]!.find((x) => x.id === id)!;
          if (t.done) return false;
          setBy((b) => ({ ...b, [from]: b[from]!.filter((x) => x.id !== id), [to]: [...(b[to] ?? []), { ...t, late: false }] }));
          return true;
        }}
      />
      {open && <p className="m-0 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">Opened {open}</p>}
    </div>
  );
}