import { Link } from "@tanstack/react-router";
import { Bell, StickyNote, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Field, Input, Select, Textarea } from "@/components/ui/input";
import { Tag, statusTone } from "@/components/ui/tag";
import { formatDue, fromDatetimeLocal, toDatetimeLocal } from "@/lib/format";
import { useWorkspace } from "@/lib/store";
import type { Priority, Status, Task } from "@/lib/types";

export function TaskDetail({ task, onClose }: { task: Task; onClose?: () => void }) {
  const projects = useWorkspace((s) => s.projects);
  const notes = useWorkspace((s) => s.notes);
  const reminders = useWorkspace((s) => s.reminders);
  const updateTask = useWorkspace((s) => s.updateTask);
  const setTaskStatus = useWorkspace((s) => s.setTaskStatus);
  const removeTask = useWorkspace((s) => s.removeTask);
  const remindFromTask = useWorkspace((s) => s.remindFromTask);
  const linkTaskNote = useWorkspace((s) => s.linkTaskNote);
  const addNote = useWorkspace((s) => s.addNote);
  const setFocus = useWorkspace((s) => s.setFocus);
  const focusTaskId = useWorkspace((s) => s.focusTaskId);

  const project = projects.find((p) => p.id === task.projectId);
  const linkedNotes = notes.filter((n) => task.noteIds.includes(n.id));
  const reminder = reminders.find((r) => r.id === task.reminderId);
  const unusedNotes = notes.filter((n) => !task.noteIds.includes(n.id));

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-start gap-2">
        <Input
          value={task.title}
          onChange={(e) => updateTask(task.id, { title: e.target.value })}
          className="font-semibold"
        />
        {onClose ? (
          <Button variant="ghost" size="sm" onClick={onClose}>
            Close
          </Button>
        ) : null}
      </div>
      <div className="flex flex-wrap gap-1.5">
        <Tag tone={statusTone(task.status)}>{task.status}</Tag>
        <Tag tone={statusTone(task.priority)}>{task.priority}</Tag>
        {project ? (
          <Link to="/projects/$projectId" params={{ projectId: project.id }} className="hover:no-underline">
            <Tag tone="accent">{project.name}</Tag>
          </Link>
        ) : (
          <Tag>Unfiled</Tag>
        )}
      </div>
      <div className="grid grid-cols-2 gap-3">
        <Field label="Status">
          <Select
            value={task.status}
            onChange={(e) => setTaskStatus(task.id, e.target.value as Status)}
          >
            <option value="todo">Todo</option>
            <option value="doing">Doing</option>
            <option value="done">Done</option>
          </Select>
        </Field>
        <Field label="Priority">
          <Select
            value={task.priority}
            onChange={(e) => updateTask(task.id, { priority: e.target.value as Priority })}
          >
            <option value="low">Low</option>
            <option value="med">Med</option>
            <option value="high">High</option>
          </Select>
        </Field>
        <Field label="Project">
          <Select
            value={task.projectId ?? ""}
            onChange={(e) => updateTask(task.id, { projectId: e.target.value || null })}
          >
            <option value="">Unfiled</option>
            {projects.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="Due">
          <Input
            type="datetime-local"
            value={toDatetimeLocal(task.dueAt)}
            onChange={(e) => updateTask(task.id, { dueAt: fromDatetimeLocal(e.target.value) })}
          />
        </Field>
      </div>
      <Field label="Body">
        <Textarea
          value={task.body}
          onChange={(e) => updateTask(task.id, { body: e.target.value })}
          rows={5}
        />
      </Field>
      <div className="flex flex-wrap gap-2">
        <Button
          size="sm"
          onClick={() => {
            remindFromTask(task.id);
            toast("Reminder posted from this task");
          }}
        >
          <Bell className="size-3.5" />
          {reminder ? `Reminder · ${formatDue(reminder.dueAt)}` : "Set reminder"}
        </Button>
        <Button
          size="sm"
          variant={task.id === focusTaskId ? "primary" : "default"}
          onClick={() => {
            const next = task.id === focusTaskId ? null : task.id;
            setFocus(next);
            toast(next ? "Focus set" : "Focus cleared");
          }}
        >
          {task.id === focusTaskId ? "Focused" : "Set as focus"}
        </Button>
        <Button
          size="sm"
          onClick={() => {
            const id = addNote(task.title, task.body, task.projectId);
            linkTaskNote(task.id, id);
            toast("Note opened from this task");
          }}
        >
          <StickyNote className="size-3.5" />
          New linked note
        </Button>
      </div>
      {linkedNotes.length > 0 ? (
        <div>
          <div className="text-[12px] font-semibold text-ink-2 mb-1.5">Linked notes</div>
          <ul className="flex flex-col gap-1">
            {linkedNotes.map((n) => (
              <li key={n.id}>
                <Link to="/notes/$noteId" params={{ noteId: n.id }} className="text-[13px]">
                  {n.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
      {unusedNotes.length > 0 ? (
        <Field label="Link an existing note">
          <Select
            defaultValue=""
            onChange={(e) => {
              if (e.target.value) {
                linkTaskNote(task.id, e.target.value);
                e.target.value = "";
                toast("Note linked");
              }
            }}
          >
            <option value="">Choose a note…</option>
            {unusedNotes.map((n) => (
              <option key={n.id} value={n.id}>
                {n.title}
              </option>
            ))}
          </Select>
        </Field>
      ) : null}
      {task.source ? (
        <p className="text-[12px] text-ink-3">
          Promoted from {task.source.kind}
          {task.source.kind === "board" || task.source.kind === "flow" ? (
            <>
              {" · "}
              <Link
                to={task.source.kind === "flow" ? "/flows/$flowId" : "/boards/$boardId"}
                params={
                  task.source.kind === "flow"
                    ? { flowId: task.source.id }
                    : { boardId: task.source.id }
                }
              >
                open source
              </Link>
            </>
          ) : task.source.kind === "note" ? (
            <>
              {" · "}
              <Link to="/notes/$noteId" params={{ noteId: task.source.id }}>
                open note
              </Link>
            </>
          ) : null}
        </p>
      ) : null}
      <div className="pt-2 border-t border-line">
        <Button
          variant="danger"
          size="sm"
          onClick={() => {
            if (window.confirm("Delete this task?")) {
              removeTask(task.id);
              onClose?.();
            }
          }}
        >
          <Trash2 className="size-3.5" />
          Delete task
        </Button>
      </div>
    </div>
  );
}