import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { exploreRepos } from "~/fns/repos";
import { searchAccounts } from "~/fns/account";
import { searchCode } from "~/fns/code";
import { CodeSearchResults } from "~/components/CodeSearchResults";
import { RepoList } from "~/components/RepoList";
import { SearchForm } from "~/components/SearchForm";
import { Badge } from "~/ui/Badge";
import { Avatar } from "~/ui/Avatar";
import { EmptyState } from "~/ui/EmptyState";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Heading } from "~/ui/Heading";
import { buttonClass } from "~/ui/Button";
import { TextLink } from "~/ui/TextLink";
import { useViewer } from "~/hooks/use-viewer";
import { CodeSearchPager } from "~/components/CodeSearchPager";
import { CODE_MAX_PAGES, CODE_PAGE_SIZE } from "~/lib/code-search";

const MAX_OWNER_CHOICES = 6;
type CodePage = Awaited<ReturnType<typeof searchCode>>;

export const Route = createFileRoute("/search")({
  validateSearch: z.object({
    q: z.string().optional(),
    type: z.enum(["code"]).optional().catch(undefined),
    owner: z.string().max(100).optional(),
    page: z.coerce.number().int().min(1).max(CODE_MAX_PAGES).optional().catch(undefined),
  }),
  loaderDeps: ({ search }) => ({
    q: search.q?.trim() ?? "",
    type: search.type,
    owner: search.owner?.trim() || undefined,
    page: search.page ?? 1,
  }),
  loader: async ({ deps }) => {
    if (!deps.q) return { q: "", kind: "overview" as const, repos: [], accounts: [] };
    if (deps.type === "code" && deps.owner) {
      const code = await searchCode({ data: { q: deps.q, owner: deps.owner, page: deps.page } });
      return { q: deps.q, kind: "code" as const, owner: deps.owner, code };
    }
    const [repos, accounts] = await Promise.all([
      exploreRepos({ data: { q: deps.q, page: 1 } }),
      searchAccounts({ data: { q: deps.q } }),
    ]);
    return { q: deps.q, kind: "overview" as const, repos: repos.repos, accounts };
  },
  component: SearchPage,
});

function SearchStart() {
  return (
    <PageContainer className="flex flex-col items-center py-20 text-center md:py-28">
      <h1 className="text-3xl font-semibold tracking-tight text-white">Search gitfor</h1>
      <p className="mt-2 max-w-xl text-kumo-subtle">
        Find repositories, people and organizations. Search issues, pull requests and code from inside a repository, or
        a person's or organization's code from here. Results only include what you have access to.
      </p>
      <SearchForm size="lg" autoFocus className="mt-8 w-full max-w-xl" />
    </PageContainer>
  );
}

/** Every code result for a query, a page at a time. */
function CodeOnlyResults({ q, owner, code }: { q: string; owner: string; code: CodePage }) {
  const navigate = useNavigate({ from: Route.fullPath });
  return (
    <PageContainer className="space-y-6">
      <SearchForm size="lg" defaultValue={q} className="max-w-xl" />
      <div className="flex flex-wrap items-baseline gap-3">
        <Heading>
          Code in {owner} matching “{q}”
        </Heading>
        <TextLink to="/search" search={{ q }} className="text-sm">
          All result types
        </TextLink>
      </div>
      <Panel
        title="Code"
        actions={
          <span className="text-xs text-kumo-subtle">
            {code.reposSearched} repositor{code.reposSearched === 1 ? "y" : "ies"} searched
            {code.reposTruncated ? " (the most recently pushed)" : ""}
          </span>
        }
      >
        <CodeSearchResults
          hits={code.hits}
          showRepo
          empty={code.invalid ? "Use search terms of at least 3 characters." : "No code matched."}
        />
        <CodeSearchPager
          {...code}
          pageSize={CODE_PAGE_SIZE}
          onPage={(page) => {
            void navigate({ search: { q, type: "code", owner, page } });
            window.scrollTo({ top: 0 });
          }}
        />
      </Panel>
    </PageContainer>
  );
}

/**
 * There is no instance-wide code index (each repository keeps its own), so code search is offered per owner:
 * the owners of matching repositories, plus the viewer's own account.
 */
function CodeScopes({ q, owners }: { q: string; owners: string[] }) {
  return (
    <Panel title="Code">
      <div className="space-y-3 px-4 py-3 text-sm text-kumo-subtle">
        <p>Code is searched inside a repository or across one owner's repositories.</p>
        {owners.length > 0 && (
          <ul className="flex flex-wrap gap-2">
            {owners.map((owner) => (
              <li key={owner}>
                <Link to="/search" search={{ q, type: "code", owner }} className={buttonClass("secondary", "sm")}>
                  Search code in {owner}
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </Panel>
  );
}

function SearchPage() {
  const data = Route.useLoaderData();
  const viewer = useViewer();
  const { q } = data;

  if (!q) return <SearchStart />;
  if (data.kind === "code") return <CodeOnlyResults q={q} owner={data.owner} code={data.code} />;
  const { repos, accounts } = data;
  const total = repos.length + accounts.length;
  const owners = [
    ...new Set([
      ...(viewer ? [viewer.name] : []),
      ...accounts.map((account) => account.name),
      ...repos.map((repo) => repo.owner),
    ]),
  ].slice(0, MAX_OWNER_CHOICES);

  if (total === 0) {
    return (
      <PageContainer className="space-y-6">
        <SearchForm size="lg" defaultValue={q} className="max-w-xl" />
        <EmptyState
          size="page"
          icon="search"
          title={`Nothing matches “${q}”`}
          action={
            <Link to="/explore" className={buttonClass("secondary")}>
              Browse repositories
            </Link>
          }
        >
          Try fewer or different words, or check the spelling. Private repositories only show up when you have access.
        </EmptyState>
        <CodeScopes q={q} owners={owners} />
      </PageContainer>
    );
  }

  return (
    <PageContainer className="space-y-6">
      <SearchForm size="lg" defaultValue={q} className="max-w-xl" />
      <Heading>
        {total} result{total === 1 ? "" : "s"} for “{q}”
      </Heading>
      <Panel title={`Repositories (${repos.length})`}>
        <RepoList repos={repos} empty="No repositories matched." />
      </Panel>
      <Panel title={`People & organizations (${accounts.length})`}>
        {accounts.length === 0 ? (
          <EmptyState title="No people or organizations matched." icon="users" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {accounts.map((account) => (
              <li key={account.name} className="flex items-center gap-3 px-4 py-3">
                <Avatar name={account.name} size="sm" />
                <Link
                  to="/$owner"
                  params={{ owner: account.name }}
                  className="min-w-0 truncate text-sm text-kumo-strong hover:text-accent-400"
                >
                  {account.name}
                </Link>
                {account.display_name && (
                  <span className="min-w-0 truncate text-sm text-kumo-subtle">{account.display_name}</span>
                )}
                {account.kind === "org" && <Badge tone="neutral">Organization</Badge>}
              </li>
            ))}
          </ul>
        )}
      </Panel>
      <CodeScopes q={q} owners={owners} />
    </PageContainer>
  );
}