import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { InlineSelect } from "~/ui/Field";
import { z } from "zod";
import { deleteProject, getProject, updateProject } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import { useProjectLive } from "~/hooks/use-project-live";
import { ProjectBoard } from "~/components/project/ProjectBoard";
import { ProjectTable } from "~/components/project/ProjectTable";
import { ProjectToolbar } from "~/components/project/ProjectToolbar";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Button, buttonClass } from "~/ui/Button";
import { cn } from "~/utils/cn";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/projects/$owner/$number")({
  validateSearch: z.object({ view: z.enum(["table", "board"]).optional(), group: z.string().optional() }),
  loader: ({ params }) => getProject({ data: { owner: params.owner, number: Number(params.number) } }),
  head: ({ loaderData }) => ({ meta: [{ title: loaderData ? `${loaderData.project.title} · Project` : "Project" }] }),
  component: ProjectPage,
});

function ProjectPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();
  const navigate = useNavigate();
  const live = useProjectLive(data.project.owner, data.project.number);
  const update = useAction(updateProject);
  const remove = useAction(deleteProject, { invalidate: false });
  const view = search.view ?? "table";
  const selects = data.fields.filter((field) => field.kind === "single_select");
  const group = selects.find((field) => field.id === search.group) ?? selects[0];
  const { project } = data;

  return (
    <PageContainer className="max-w-7xl space-y-4">
      <header className="flex flex-wrap items-center gap-3">
        <Heading>
          <Link
            to="/projects/$owner"
            params={{ owner: project.owner }}
            className="text-kumo-subtle hover:text-accent-400"
          >
            {project.owner}
          </Link>
          <span className="mx-1 text-kumo-inactive">/</span>
          {project.title}
        </Heading>
        <Badge>{project.visibility}</Badge>
        {project.closed && <Badge tone="merged">Closed</Badge>}
        <div className="ml-auto flex items-center gap-1" title={live.connected ? "Live" : "Reconnecting…"}>
          <span className={cn("size-2 rounded-full", live.connected ? "bg-success-500" : "bg-gray-600")} />
          {live.viewers.slice(0, 5).map((name) => (
            <span key={name} title={name}>
              <Avatar name={name} size="sm" />
            </span>
          ))}
        </div>
      </header>
      {project.description && <p className="text-sm text-kumo-subtle">{project.description}</p>}
      <div className="flex flex-wrap items-center gap-2">
        {(["table", "board"] as const).map((item) => (
          <Link
            key={item}
            to="/projects/$owner/$number"
            params={params}
            search={{ ...search, view: item }}
            className={cn(buttonClass(view === item ? "secondary" : "ghost", "sm"), "capitalize")}
          >
            {item}
          </Link>
        ))}
        {view === "board" && selects.length > 1 && (
          <InlineSelect
            label="Group by"
            value={group?.id}
            onValueChange={(value) =>
              navigate({ to: "/projects/$owner/$number", params, search: { ...search, group: value } })
            }
            options={selects.map((field) => ({ value: field.id, label: `Group by ${field.name}` }))}
          />
        )}
        {data.canWrite && (
          <div className="ml-auto flex gap-1">
            <Button
              size="sm"
              variant="ghost"
              pending={update.pending}
              onClick={() =>
                update.run({
                  data: {
                    owner: project.owner,
                    number: project.number,
                    title: project.title,
                    description: project.description,
                    visibility: project.visibility,
                    closed: !project.closed,
                  },
                })
              }
            >
              {project.closed ? "Reopen project" : "Close project"}
            </Button>
            <Button
              size="sm"
              variant="danger"
              pending={remove.pending}
              onClick={async () => {
                if (!window.confirm(`Delete project ${project.title}?`)) return;
                if (await remove.run({ data: { owner: project.owner, number: project.number } }))
                  await navigate({ to: "/projects/$owner", params: { owner: project.owner } });
              }}
            >
              Delete
            </Button>
          </div>
        )}
      </div>
      {data.canWrite && <ProjectToolbar data={data} />}
      <Panel title={`${data.items.length} items`}>
        {view === "board" ? <ProjectBoard data={data} field={group} /> : <ProjectTable data={data} />}
      </Panel>
    </PageContainer>
  );
}