import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { Dialog } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Field, Input, Select, Textarea } from "@/components/ui/input";
import { followUpIn, fromDateInput, fromDatetimeLocal, toDateInput } from "@/lib/format";
import { useWorkspace } from "@/lib/store";

type Kind = "task" | "note" | "reminder" | "waiting" | "project" | "board" | "flow";

export function QuickAdd({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const navigate = useNavigate();
  const projects = useWorkspace((s) => s.projects);
  const addTask = useWorkspace((s) => s.addTask);
  const addNote = useWorkspace((s) => s.addNote);
  const addReminder = useWorkspace((s) => s.addReminder);
  const addProject = useWorkspace((s) => s.addProject);
  const addBoard = useWorkspace((s) => s.addBoard);
  const addWaiting = useWorkspace((s) => s.addWaiting);

  const [kind, setKind] = useState<Kind>("task");
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [projectId, setProjectId] = useState<string>("");
  const [due, setDue] = useState("");
  const [who, setWho] = useState("");
  const [follow, setFollow] = useState(() => toDateInput(followUpIn(3)));

  const reset = () => {
    setTitle("");
    setBody("");
    setDue("");
    setWho("");
    setFollow(toDateInput(followUpIn(3)));
  };

  const submit = () => {
    const pid = projectId || null;
    if (kind === "project") {
      const id = addProject(title, body);
      onOpenChange(false);
      reset();
      void navigate({ to: "/projects/$projectId", params: { projectId: id } });
      return;
    }
    if (kind === "task") {
      addTask({ title, body, projectId: pid, dueAt: fromDatetimeLocal(due) });
      onOpenChange(false);
      reset();
      void navigate({ to: "/tasks" });
      return;
    }
    if (kind === "note") {
      const id = addNote(title, body, pid);
      onOpenChange(false);
      reset();
      void navigate({ to: "/notes/$noteId", params: { noteId: id } });
      return;
    }
    if (kind === "waiting") {
      addWaiting({ title, who, notes: body, projectId: pid, followUpAt: fromDateInput(follow) });
      onOpenChange(false);
      reset();
      void navigate({ to: "/waiting" });
      return;
    }
    if (kind === "reminder") {
      const dueAt = fromDatetimeLocal(due) ?? new Date(Date.now() + 3600000).toISOString();
      addReminder({ title, dueAt, projectId: pid });
      onOpenChange(false);
      reset();
      void navigate({ to: "/reminders" });
      return;
    }
    const id = addBoard(kind, title, pid);
    onOpenChange(false);
    reset();
    void navigate({
      to: kind === "flow" ? "/flows/$flowId" : "/boards/$boardId",
      params: kind === "flow" ? { flowId: id } : { boardId: id },
    });
  };

  return (
    <Dialog
      open={open}
      onOpenChange={onOpenChange}
      title="New entry"
      footer={
        <>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button variant="primary" onClick={submit} disabled={!title.trim() && kind !== "board" && kind !== "flow"}>
            Create
          </Button>
        </>
      }
    >
      <div className="flex flex-wrap gap-1 mb-4">
        {(["task", "note", "reminder", "waiting", "project", "board", "flow"] as Kind[]).map((k) => (
          <Button
            key={k}
            size="sm"
            variant={kind === k ? "primary" : "default"}
            onClick={() => setKind(k)}
            className="capitalize"
          >
            {k === "waiting" ? "Waiting on" : k}
          </Button>
        ))}
      </div>
      <Field label="Title">
        <Input
          autoFocus
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              submit();
            }
          }}
          placeholder={
            kind === "flow" ? "Ship the release" : kind === "waiting" ? "What are you waiting for?" : "Name this entry"
          }
        />
      </Field>
      {kind === "waiting" ? (
        <Field label="From">
          <Input value={who} onChange={(e) => setWho(e.target.value)} placeholder="Person or company" />
        </Field>
      ) : null}
      {kind === "task" || kind === "note" || kind === "project" || kind === "waiting" ? (
        <Field label={kind === "project" ? "Description" : kind === "waiting" ? "Notes" : "Body"}>
          <Textarea value={body} onChange={(e) => setBody(e.target.value)} rows={4} />
        </Field>
      ) : null}
      {kind !== "project" ? (
        <Field label="Project">
          <Select value={projectId} onChange={(e) => setProjectId(e.target.value)}>
            <option value="">Unfiled</option>
            {projects
              .filter((p) => p.status !== "done")
              .map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
          </Select>
        </Field>
      ) : null}
      {kind === "waiting" ? (
        <Field label="Follow up">
          <Input type="date" value={follow} onChange={(e) => setFollow(e.target.value)} />
        </Field>
      ) : null}
      {kind === "task" || kind === "reminder" ? (
        <Field label="Due">
          <Input type="datetime-local" value={due} onChange={(e) => setDue(e.target.value)} />
        </Field>
      ) : null}
    </Dialog>
  );
}