import { TopicList } from "~/components/TopicList";
import { DropdownMenu } from "@cloudflare/kumo/components/dropdown";
import { Popover } from "@cloudflare/kumo/components/popover";
import { createFileRoute, Link, Outlet, redirect, useMatchRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { setRepoVisibility } from "~/lib/analytics";
import { forkRepo, getRepoHeader, toggleStar, transferableOwners } from "~/fns/repos";
import { WatchMenu } from "~/components/WatchMenu";
import { useAction } from "~/hooks/use-action";
import { useOptimisticMutation } from "~/hooks/use-optimistic-mutation";
import { useViewer } from "~/hooks/use-viewer";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";
import { RepoProvisioning } from "~/components/RepoProvisioning";
import { usePollWhile } from "~/hooks/use-poll-while";
import { useEditorHotkey } from "~/hooks/use-editor-hotkey";
import { TextLink } from "~/ui/TextLink";
import { CountBadge } from "~/ui/CountBadge";
import { RouteTabs } from "~/ui/Nav";
import { SignInLink } from "~/components/SignInPrompt";
import { ReportLink } from "~/components/ReportLink";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/$owner/$repo")({
  loader: async ({ params, location }) => {
    const header = await getRepoHeader({ data: { owner: params.owner, repo: params.repo } });
    const canonical = `/${header.repo.owner}/${header.repo.name}`;
    if (canonical.toLowerCase() !== `/${params.owner}/${params.repo}`.toLowerCase()) {
      const rest = location.pathname.split("/").slice(3).join("/");
      throw redirect({ href: `${canonical}${rest ? `/${rest}` : ""}${location.searchStr}` });
    }
    // Before the navigation resolves, so the pageview (sent on resolve) already knows whether the path is public.
    if (typeof window !== "undefined") {
      setRepoVisibility(header.repo.owner, header.repo.name, header.repo.visibility !== "public");
    }
    return header;
  },
  head: ({ params, loaderData, match }) => {
    const title = `${params.owner}/${params.repo} · gitfor`;
    if (!loaderData?.og.shareable) {
      return { meta: seo({ origin: match.context.publicUrl, title: "gitfor", documentTitle: title }) };
    }
    const { repo } = loaderData;
    return {
      meta: seo({
        origin: match.context.publicUrl,
        path: `/${repo.owner}/${repo.name}`,
        title: `${repo.owner}/${repo.name}`,
        documentTitle: title,
        description: repo.description ?? `${repo.owner}/${repo.name} on gitfor`,
        image: loaderData.og.image,
        imageAlt: `${repo.owner}/${repo.name}${repo.description ? `: ${repo.description}` : ""}`,
      }),
    };
  },
  component: RepoLayout,
});

function CloneBox({ url }: { url: string }) {
  return (
    <Popover>
      <Popover.Trigger render={<Button variant="primary" size="sm" />}>Clone ▾</Popover.Trigger>
      <Popover.Content align="end" className="w-96 space-y-2 p-3">
        <label htmlFor="clone-url" className="label-small text-kumo-subtle">
          HTTPS
        </label>
        <input
          id="clone-url"
          readOnly
          value={url}
          onFocus={(event) => event.currentTarget.select()}
          className={cn(inputClass, "h-8 font-mono text-xs")}
        />
        <p className="text-xs text-kumo-subtle">Authenticate with your username and a personal access token.</p>
      </Popover.Content>
    </Popover>
  );
}

function ForkButton({ owner, repo, count }: { owner: string; repo: string; count: number }) {
  const navigate = useNavigate();
  const [targets, setTargets] = useState<string[] | null>(null);
  const fork = useAction(forkRepo, { invalidate: false });

  async function openChange(open: boolean) {
    if (!open) return setTargets(null);
    fork.reset();
    setTargets([]);
    const owners = await transferableOwners();
    setTargets((current) => (current === null ? null : owners));
  }

  async function choose(target: string) {
    const choices = targets;
    setTargets(null);
    const result = await fork.run({ data: { owner, repo, targetOwner: target } });
    if (result) await navigate({ to: "/$owner/$repo", params: { owner: result.owner, repo: result.name } });
    else setTargets(choices);
  }

  return (
    <DropdownMenu open={targets !== null} onOpenChange={(open) => void openChange(open)}>
      <DropdownMenu.Trigger render={<Button size="sm" disabled={fork.pending} />}>
        ⑂ {fork.pending ? "Forking…" : "Fork"}{" "}
        <span className="text-kumo-subtle tabular-nums">{fork.pending ? count + 1 : count}</span>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content align="end" className="w-56">
        <DropdownMenu.Group>
          <DropdownMenu.Label>Fork into…</DropdownMenu.Label>
          {targets?.length === 0 && <DropdownMenu.Item disabled>Loading accounts…</DropdownMenu.Item>}
          {targets?.map((target) => (
            <DropdownMenu.Item key={target} onClick={() => choose(target)}>
              {target}
            </DropdownMenu.Item>
          ))}
        </DropdownMenu.Group>
        {fork.error && <p className="px-3 py-1.5 text-xs text-kumo-danger">{fork.error}</p>}
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

const BACKFILL_POLL_MS = 10_000;

function RepoLayout() {
  const header = Route.useLoaderData();
  useEffect(() => {
    setRepoVisibility(header.repo.owner, header.repo.name, header.repo.visibility !== "public");
  }, [header.repo.owner, header.repo.name, header.repo.visibility]);
  const params = Route.useParams();
  const viewer = useViewer();
  const star = useOptimisticMutation(
    { starred: header.starred, count: header.repo.starsCount },
    (state, starred: boolean) => ({ starred, count: Math.max(0, state.count + (starred ? 1 : -1)) }),
    (starred: boolean) => toggleStar({ data: { ...params, star: starred } }),
  );
  const { repo, permission } = header;
  usePollWhile(repo.status === "ready" && repo.backfilling, BACKFILL_POLL_MS);
  const canAdmin = permission === "admin";
  const repoParams = { owner: repo.owner, repo: repo.name };
  const matchRoute = useMatchRoute();
  useEditorHotkey(repo.owner, repo.name, repo.defaultBranch, viewer !== null);

  const tabs = [
    { to: "/$owner/$repo", label: "Code", exact: true, show: true, count: null },
    { to: "/$owner/$repo/issues", label: "Issues", exact: false, show: repo.hasIssues, count: repo.openIssuesCount },
    { to: "/$owner/$repo/pulls", label: "Pull requests", exact: false, show: true, count: repo.openPullsCount },
    { to: "/$owner/$repo/discussions", label: "Discussions", exact: false, show: repo.hasIssues, count: null },
    { to: "/$owner/$repo/actions", label: "Actions", exact: false, show: repo.hasActions, count: null },
    { to: "/$owner/$repo/releases", label: "Releases", exact: false, show: true, count: null },
    { to: "/$owner/$repo/security", label: "Security", exact: false, show: true, count: null },
    { to: "/$owner/$repo/insights", label: "Insights", exact: false, show: true, count: null },
    { to: "/$owner/$repo/settings", label: "Settings", exact: false, show: canAdmin, count: null },
  ] as const;

  return (
    <div>
      <div className="border-b border-kumo-hairline bg-kumo-canvas/60">
        <div className="mx-auto max-w-7xl px-4 pt-5 md:px-6">
          <div className="flex flex-wrap items-center gap-3">
            <h1 className="font-mono text-lg">
              <Link to="/$owner" params={{ owner: repo.owner }} className="text-kumo-subtle hover:text-accent-400">
                {repo.owner}
              </Link>
              <span className="mx-1 text-kumo-inactive">/</span>
              <Link
                to="/$owner/$repo"
                params={repoParams}
                className="font-semibold text-kumo-strong hover:text-accent-400"
              >
                {repo.name}
              </Link>
            </h1>
            <Badge>{repo.visibility}</Badge>
            {repo.isArchived && <Badge tone="warning">Archived</Badge>}
            {header.hidden && <Badge tone="danger">Hidden by site admin</Badge>}
            {header.ownerDisabled && <Badge tone="danger">Account disabled</Badge>}
            {repo.status !== "ready" && <Badge tone="warning">{repo.status}…</Badge>}
            {repo.status === "ready" && repo.backfilling && <Badge tone="warning">importing branches…</Badge>}
            <div className="ml-auto flex items-center gap-2">
              {!viewer && (
                <>
                  <SignInLink label={`☆ Star ${repo.starsCount}`} variant="secondary" />
                  <SignInLink label={`⑂ Fork ${repo.forksCount}`} variant="secondary" />
                </>
              )}
              {viewer && (
                <>
                  <WatchMenu owner={repo.owner} repo={repo.name} watching={header.watching} />
                  <Button
                    size="sm"
                    aria-pressed={star.state.starred}
                    title={star.error ?? undefined}
                    onClick={() => star.run(!star.state.starred)}
                  >
                    <span className="inline-block w-14 text-left">{star.state.starred ? "★ Starred" : "☆ Star"}</span>
                    <span className="text-kumo-subtle tabular-nums">{star.state.count}</span>
                  </Button>
                  <ForkButton owner={repo.owner} repo={repo.name} count={repo.forksCount} />
                </>
              )}
              <CloneBox url={header.cloneUrl} />
            </div>
          </div>
          {repo.forkOf && (
            <p className="mt-1 text-xs text-kumo-subtle">
              forked from{" "}
              <TextLink to="/$owner/$repo" params={{ owner: repo.forkOf.owner, repo: repo.forkOf.name }} tone="subtle">
                {repo.forkOf.owner}/{repo.forkOf.name}
              </TextLink>
            </p>
          )}
          {repo.description && <p className="mt-2 max-w-3xl text-sm text-kumo-subtle">{repo.description}</p>}
          <TopicList topics={repo.topics} className="mt-2" />
          <p className="mt-1 flex gap-3">
            <ReportLink owner={repo.owner} path={`/${repo.owner}/${repo.name}`} label="Report repository" />
          </p>
          <RouteTabs
            className="mt-4"
            tabs={tabs
              .filter((tab) => tab.show)
              .map((tab) => ({
                value: tab.to,
                active: Boolean(matchRoute({ to: tab.to, params: repoParams, fuzzy: !tab.exact })),
                link: <Link to={tab.to} params={repoParams} />,
                label: (
                  <span className="flex items-center gap-2">
                    {tab.label}
                    {tab.count !== null && tab.count > 0 && <CountBadge count={tab.count} />}
                  </span>
                ),
              }))}
          />
        </div>
      </div>
      <div className="mx-auto max-w-7xl px-4 py-6 md:px-6">
        {repo.status === "ready" ? (
          <Outlet />
        ) : (
          <RepoProvisioning
            owner={repo.owner}
            name={repo.name}
            status={repo.status}
            error={repo.statusError}
            createdAt={repo.createdAt}
            canAdmin={canAdmin}
          />
        )}
      </div>
    </div>
  );
}