import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { Plus } from "lucide-react";
import { toast } from "sonner";
import { Empty, Page } from "@/components/page";
import { Button } from "@/components/ui/button";
import { Tag, statusTone } from "@/components/ui/tag";
import { useWorkspace } from "@/lib/store";

export const Route = createFileRoute("/projects/")({ component: ProjectsPage });

function ProjectsPage() {
  const navigate = useNavigate();
  const projects = useWorkspace((s) => s.projects);
  const tasks = useWorkspace((s) => s.tasks);
  const notes = useWorkspace((s) => s.notes);
  const boards = useWorkspace((s) => s.boards);
  const addProject = useWorkspace((s) => s.addProject);

  const create = () => {
    const id = addProject("Untitled project");
    toast("Project opened");
    void navigate({ to: "/projects/$projectId", params: { projectId: id } });
  };

  return (
    <Page
      eyebrow="Book"
      title="Projects"
      description="Each project holds tasks, notes, reminders, boards, and flows. Open one to see the full ledger."
      actions={
        <Button variant="primary" onClick={create}>
          <Plus className="size-3.5" />
          New project
        </Button>
      }
    >
      {projects.length === 0 ? (
        <Empty title="No projects" body="Create a project to file work against." />
      ) : (
        <div className="grid md:grid-cols-2 gap-3">
          {projects.map((p) => {
            const pt = tasks.filter((t) => t.projectId === p.id);
            const done = pt.filter((t) => t.status === "done").length;
            const pct = pt.length ? Math.round((done / pt.length) * 100) : 0;
            return (
              <Link
                key={p.id}
                to="/projects/$projectId"
                params={{ projectId: p.id }}
                className="border border-line rounded-md p-4 bg-surface text-ink hover:no-underline hover:shadow-[var(--shadow-pop)]"
              >
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <strong className="text-base font-semibold">{p.name}</strong>
                    <p className="mt-1 text-[13px] text-ink-2 line-clamp-2">{p.description || "No description."}</p>
                  </div>
                  <Tag tone={statusTone(p.status)}>{p.status}</Tag>
                </div>
                <div className="mt-3 h-1.5 rounded-full bg-neutral overflow-hidden">
                  <i className="block h-full bg-ok-emphasis rounded-full" style={{ width: `${pct}%` }} />
                </div>
                <p className="mt-2 font-mono text-xs tabular-nums text-ink-2">
                  {done}/{pt.length} tasks · {notes.filter((n) => n.projectId === p.id).length} notes ·{" "}
                  {boards.filter((b) => b.projectId === p.id).length} canvases
                </p>
              </Link>
            );
          })}
        </div>
      )}
    </Page>
  );
}