import { useNavigate } from "@tanstack/react-router";
import { Command } from "cmdk";
import {
  CalendarClock,
  CheckSquare,
  FolderKanban,
  GitBranch,
  Hourglass,
  PenLine,
  StickyNote,
} from "lucide-react";
import { useWorkspace } from "@/lib/store";

export function CommandPalette({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const navigate = useNavigate();
  const projects = useWorkspace((s) => s.projects);
  const tasks = useWorkspace((s) => s.tasks);
  const notes = useWorkspace((s) => s.notes);
  const reminders = useWorkspace((s) => s.reminders);
  const boards = useWorkspace((s) => s.boards);
  const waiting = useWorkspace((s) => s.waiting);

  const go = (to: string) => {
    onOpenChange(false);
    void navigate({ to });
  };

  return (
    <Command.Dialog
      open={open}
      onOpenChange={onOpenChange}
      label="Search Fieldbook"
      className="fixed inset-0 z-50"
    >
      <div className="absolute inset-0 bg-ink/30" onClick={() => onOpenChange(false)} />
      <div className="absolute left-1/2 top-[12vh] -translate-x-1/2 w-[min(560px,94vw)] bg-surface border border-line rounded-lg shadow-[var(--shadow-pop)] overflow-hidden">
        <Command.Input
          placeholder="Jump to a project, task, note, board…"
          className="w-full border-0 border-b border-line px-4 py-3 text-[14px] outline-none bg-surface"
        />
        <Command.List className="max-h-[min(420px,60vh)] overflow-y-auto p-1">
          <Command.Empty className="px-3 py-8 text-center text-[13px] text-ink-3">
            Nothing in the book matches.
          </Command.Empty>
          <Command.Group heading="Projects" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-ink-3">
            {projects.map((p) => (
              <Item key={p.id} onSelect={() => go(`/projects/${p.id}`)} icon={<FolderKanban className="size-3.5" />}>
                {p.name}
              </Item>
            ))}
          </Command.Group>
          <Command.Group heading="Tasks" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-ink-3">
            {tasks.map((t) => (
              <Item key={t.id} onSelect={() => go(`/tasks?focus=${t.id}`)} icon={<CheckSquare className="size-3.5" />}>
                {t.title}
              </Item>
            ))}
          </Command.Group>
          <Command.Group heading="Notes" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-ink-3">
            {notes.map((n) => (
              <Item key={n.id} onSelect={() => go(`/notes/${n.id}`)} icon={<StickyNote className="size-3.5" />}>
                {n.title}
              </Item>
            ))}
          </Command.Group>
          <Command.Group heading="Reminders" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-ink-3">
            {reminders.map((r) => (
              <Item key={r.id} onSelect={() => go("/reminders")} icon={<CalendarClock className="size-3.5" />}>
                {r.title}
              </Item>
            ))}
          </Command.Group>
          <Command.Group heading="Waiting on" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-ink-3">
            {waiting
              .filter((w) => !w.done)
              .map((w) => (
                <Item key={w.id} onSelect={() => go("/waiting")} icon={<Hourglass className="size-3.5" />}>
                  {w.who ? `${w.title} — ${w.who}` : w.title}
                </Item>
              ))}
          </Command.Group>
          <Command.Group heading="Boards & flows" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-ink-3">
            {boards.map((b) => (
              <Item
                key={b.id}
                onSelect={() => go(b.kind === "flow" ? `/flows/${b.id}` : `/boards/${b.id}`)}
                icon={
                  b.kind === "flow" ? (
                    <GitBranch className="size-3.5" />
                  ) : (
                    <PenLine className="size-3.5" />
                  )
                }
              >
                {b.title}
              </Item>
            ))}
          </Command.Group>
        </Command.List>
      </div>
    </Command.Dialog>
  );
}

function Item({
  children,
  onSelect,
  icon,
}: {
  children: React.ReactNode;
  onSelect: () => void;
  icon: React.ReactNode;
}) {
  return (
    <Command.Item
      onSelect={onSelect}
      className="flex items-center gap-2 px-2 py-2 text-[13px] text-ink-2 data-[selected=true]:bg-accent-soft data-[selected=true]:text-ink cursor-pointer rounded-xs"
    >
      <span className="text-ink-3">{icon}</span>
      <span className="truncate">{children}</span>
    </Command.Item>
  );
}