import { Link, useNavigate } from "@tanstack/react-router";
import { IssueList } from "./IssueList";
import { Panel } from "~/ui/Panel";
import { buttonClass } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";
import type { listIssues } from "~/fns/issues";
import { useEmailUnverified } from "~/hooks/use-viewer";
import { VerifyEmailHint } from "./VerifyEmailHint";

type Data = Awaited<ReturnType<typeof listIssues>>;
type Search = { state?: "open" | "closed" | "all"; q?: string; label?: string; page?: number };

export function IssueListPage({
  owner,
  repo,
  data,
  search,
  kind,
}: {
  owner: string;
  repo: string;
  data: Data;
  search: Search;
  kind: "issue" | "pull";
}) {
  const navigate = useNavigate();
  const unverified = useEmailUnverified();
  const to = kind === "pull" ? "/$owner/$repo/pulls" : "/$owner/$repo/issues";
  const state = search.state ?? "open";
  const page = search.page ?? 1;
  const filters = [
    { id: "open", label: `${data.openCount} Open` },
    { id: "closed", label: `${data.closedCount} Closed` },
  ] as const;

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        <form
          className="min-w-64 flex-1"
          onSubmit={(event) => {
            event.preventDefault();
            const q = String(new FormData(event.currentTarget).get("q") ?? "");
            navigate({ to, params: { owner, repo }, search: { ...search, q: q || undefined, page: undefined } });
          }}
        >
          <label htmlFor="issue-search" className="sr-only">
            Search
          </label>
          <input
            id="issue-search"
            name="q"
            defaultValue={search.q ?? ""}
            placeholder="Search…"
            className={cn(inputClass, "h-8 text-sm")}
          />
        </form>
        {kind === "issue" && (
          <Link to="/$owner/$repo/labels" params={{ owner, repo }} className={buttonClass("secondary", "sm")}>
            Labels
          </Link>
        )}
        {kind === "issue" && (
          <Link to="/$owner/$repo/milestones" params={{ owner, repo }} className={buttonClass("secondary", "sm")}>
            Milestones
          </Link>
        )}
        {unverified ? (
          <VerifyEmailHint action={kind === "issue" ? "open issues" : "open pull requests"} />
        ) : kind === "issue" ? (
          <Link to="/$owner/$repo/issues/new" params={{ owner, repo }} className={buttonClass("primary", "sm")}>
            New issue
          </Link>
        ) : (
          <Link
            to="/$owner/$repo/compare/$"
            params={{ owner, repo, _splat: "" }}
            className={buttonClass("primary", "sm")}
          >
            New pull request
          </Link>
        )}
      </div>
      <Panel
        title={
          <div className="flex gap-4">
            {filters.map((filter) => (
              <Link
                key={filter.id}
                to={to}
                params={{ owner, repo }}
                search={{ ...search, state: filter.id, page: undefined }}
                className={cn(
                  "text-sm",
                  state === filter.id ? "font-medium text-white" : "text-kumo-subtle hover:text-kumo-strong",
                )}
              >
                {filter.label}
              </Link>
            ))}
            {search.label && <span className="text-xs text-kumo-subtle">label: {search.label}</span>}
          </div>
        }
      >
        <IssueList owner={owner} repo={repo} items={data.items} kind={kind} />
      </Panel>
      <div className="flex justify-between">
        {page > 1 ? (
          <Link
            to={to}
            params={{ owner, repo }}
            search={{ ...search, page: page - 1 }}
            className={buttonClass("secondary", "sm")}
          >
            Previous
          </Link>
        ) : (
          <span />
        )}
        {data.hasMore && (
          <Link
            to={to}
            params={{ owner, repo }}
            search={{ ...search, page: page + 1 }}
            className={buttonClass("secondary", "sm")}
          >
            Next
          </Link>
        )}
      </div>
    </div>
  );
}