import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { z } from "zod";
import { createProject, listProjects } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button, buttonClass } from "~/ui/Button";
import { SelectField, TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/projects/$owner/")({
  validateSearch: z.object({ closed: z.boolean().optional() }),
  loaderDeps: ({ search }) => search,
  loader: ({ params, deps }) => listProjects({ data: { owner: params.owner, closed: deps.closed ?? false } }),
  head: ({ params }) => ({ meta: [{ title: `Projects · ${params.owner}` }] }),
  component: ProjectsPage,
});

const VISIBILITY = [
  { value: "private", label: "Private — members only" },
  { value: "public", label: "Public" },
] as const;

function NewProject({ owner }: { owner: string }) {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const create = useAction(createProject, { invalidate: false });
  if (!open)
    return (
      <Button variant="primary" size="sm" onClick={() => setOpen(true)}>
        New project
      </Button>
    );
  return (
    <Panel title="New project">
      <form
        className="space-y-3 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const result = await create.run({
            data: {
              owner,
              title: String(form.get("title") ?? ""),
              description: String(form.get("description") ?? ""),
              visibility: form.get("visibility") === "public" ? "public" : "private",
            },
          });
          if (result)
            await navigate({ to: "/projects/$owner/$number", params: { owner, number: String(result.number) } });
        }}
      >
        <ErrorBanner message={create.error} />
        <TextField label="Title" name="title" required autoFocus />
        <TextAreaField label="Description" name="description" rows={2} />
        <SelectField label="Visibility" name="visibility" options={VISIBILITY} />
        <Button type="submit" variant="primary" pending={create.pending}>
          Create project
        </Button>
      </form>
    </Panel>
  );
}

function ProjectsPage() {
  const data = Route.useLoaderData();
  const search = Route.useSearch();
  const closed = search.closed ?? false;
  return (
    <PageContainer className="space-y-4">
      <div className="flex items-center gap-2">
        <Heading className="mr-4">
          <Link to="/$owner" params={{ owner: data.owner }} className="hover:text-accent-400">
            {data.owner}
          </Link>{" "}
          / projects
        </Heading>
        <Link
          to="/projects/$owner"
          params={{ owner: data.owner }}
          search={{}}
          className={cn(buttonClass(closed ? "ghost" : "secondary", "sm"))}
        >
          Open
        </Link>
        <Link
          to="/projects/$owner"
          params={{ owner: data.owner }}
          search={{ closed: true }}
          className={cn(buttonClass(closed ? "secondary" : "ghost", "sm"))}
        >
          Closed
        </Link>
        <div className="ml-auto">{data.canCreate && <NewProject owner={data.owner} />}</div>
      </div>
      <Panel title={`${data.projects.length} projects`}>
        {data.projects.length === 0 ? (
          <EmptyState title="No projects" icon="project">
            Projects track issues and pull requests across repositories.
          </EmptyState>
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {data.projects.map((project) => (
              <li key={project.number} className="flex items-center gap-4 px-4 py-3">
                <div className="min-w-0 flex-1">
                  <Link
                    to="/projects/$owner/$number"
                    params={{ owner: data.owner, number: String(project.number) }}
                    className="font-medium text-kumo-strong hover:text-accent-400"
                  >
                    {project.title}
                  </Link>
                  {project.description && <p className="truncate text-sm text-kumo-subtle">{project.description}</p>}
                </div>
                <Badge>{project.visibility}</Badge>
                <span className="text-xs text-kumo-subtle">
                  {project.items} items · <RelativeTime timestamp={project.updated_at} />
                </span>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </PageContainer>
  );
}