import { createFileRoute, Link } from "@tanstack/react-router";
import { Plus } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Empty, Page, Panel } from "@/components/page";
import { Button } from "@/components/ui/button";
import { Field, Input, Select } from "@/components/ui/input";
import { Tag } from "@/components/ui/tag";
import { dueKind, formatDue, fromDatetimeLocal, toDatetimeLocal } from "@/lib/format";
import { useWorkspace } from "@/lib/store";

export const Route = createFileRoute("/reminders")({ component: RemindersPage });

function RemindersPage() {
  const reminders = useWorkspace((s) => s.reminders);
  const projects = useWorkspace((s) => s.projects);
  const tasks = useWorkspace((s) => s.tasks);
  const addReminder = useWorkspace((s) => s.addReminder);
  const toggleReminder = useWorkspace((s) => s.toggleReminder);
  const removeReminder = useWorkspace((s) => s.removeReminder);
  const updateReminder = useWorkspace((s) => s.updateReminder);

  const [title, setTitle] = useState("");
  const [due, setDue] = useState("");
  const [projectId, setProjectId] = useState("");

  const groups = [
    { key: "overdue", label: "Overdue", items: reminders.filter((r) => !r.done && dueKind(r.dueAt) === "overdue") },
    { key: "today", label: "Today", items: reminders.filter((r) => !r.done && dueKind(r.dueAt) === "today") },
    { key: "soon", label: "Soon", items: reminders.filter((r) => !r.done && dueKind(r.dueAt) === "soon") },
    {
      key: "later",
      label: "Later",
      items: reminders.filter((r) => !r.done && (dueKind(r.dueAt) === "later" || dueKind(r.dueAt) === "none")),
    },
    { key: "done", label: "Done", items: reminders.filter((r) => r.done) },
  ];

  return (
    <Page
      eyebrow="Time"
      title="Reminders"
      description="Checking off a reminder completes its linked task. Completing a task checks the reminder."
    >
      <Panel title="New reminder" className="mb-4">
        <form
          className="grid md:grid-cols-[1fr_200px_180px_auto] gap-2 items-end"
          onSubmit={(e) => {
            e.preventDefault();
            if (!title.trim()) return;
            const dueAt = fromDatetimeLocal(due) ?? new Date(Date.now() + 3600000).toISOString();
            addReminder({ title, dueAt, projectId: projectId || null });
            setTitle("");
            setDue("");
            toast("Reminder set");
          }}
        >
          <Field label="Title">
            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="What should fire" />
          </Field>
          <Field label="Due">
            <Input type="datetime-local" value={due} onChange={(e) => setDue(e.target.value)} />
          </Field>
          <Field label="Project">
            <Select value={projectId} onChange={(e) => setProjectId(e.target.value)}>
              <option value="">Unfiled</option>
              {projects.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </Select>
          </Field>
          <Button variant="primary" type="submit" disabled={!title.trim()} className="mb-3">
            <Plus className="size-3.5" />
            Add
          </Button>
        </form>
      </Panel>

      <div className="flex flex-col gap-4">
        {groups.map((g) =>
          g.items.length === 0 ? null : (
            <Panel key={g.key} title={g.label} meta={`${g.items.length}`} flush>
              <ul>
                {g.items.map((r) => {
                  const task = tasks.find((t) => t.id === r.taskId);
                  const project = projects.find((p) => p.id === r.projectId);
                  const kind = dueKind(r.dueAt);
                  return (
                    <li key={r.id} className="flex items-center gap-3 px-3.5 py-2.5 border-b border-line-hair last:border-0 min-h-11">
                      <button
                        type="button"
                        aria-label={r.done ? "Reopen" : "Complete"}
                        onClick={() => toggleReminder(r.id)}
                        className="size-4 rounded-full border border-line-strong shrink-0 data-[on=true]:bg-ok data-[on=true]:border-ok"
                        data-on={r.done}
                      />
                      <div className="min-w-0 flex-1">
                        <div className={r.done ? "text-[13px] line-through text-ink-3" : "text-[13px] font-medium"}>
                          {r.title}
                        </div>
                        <div className="text-xs text-ink-3 flex flex-wrap gap-2">
                          {project ? <span>{project.name}</span> : null}
                          {task ? (
                            <Link to="/tasks" search={{ focus: task.id }}>
                              Task: {task.title}
                            </Link>
                          ) : null}
                        </div>
                      </div>
                      <Tag tone={kind === "overdue" ? "error" : kind === "today" ? "accent" : "quiet"}>
                        {formatDue(r.dueAt)}
                      </Tag>
                      <Input
                        type="datetime-local"
                        className="hidden md:block w-[190px]"
                        defaultValue={toDatetimeLocal(r.dueAt)}
                        onBlur={(e) => {
                          const next = fromDatetimeLocal(e.target.value);
                          if (next) updateReminder(r.id, { dueAt: next });
                        }}
                      />
                      <Button size="sm" variant="ghost" onClick={() => removeReminder(r.id)}>
                        Remove
                      </Button>
                    </li>
                  );
                })}
              </ul>
            </Panel>
          ),
        )}
        {reminders.length === 0 ? (
          <Empty title="No reminders" body="Set one from a task, or add one above." />
        ) : null}
      </div>
    </Page>
  );
}