import { Link } from "@tanstack/react-router";
import { RepoList } from "~/components/RepoList";
import { VideoPlayer } from "~/components/VideoPlayer";
import { videoUrl } from "~/lib/video";
import { FEATURE_CATALOG } from "~/lib/marketing/catalog";
import { FEATURE_PAGES } from "~/lib/marketing/features";
import { SOURCE_URL } from "~/lib/marketing/site";
import { buttonClass } from "~/ui/Button";
import { CodeBlock } from "~/ui/CodeBlock";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { TextLink } from "~/ui/TextLink";
import { CtaBand } from "./CtaBand";
import { DisplayTitle } from "./DisplayTitle";
import { PullRequestDemo } from "./demos/PullRequestDemo";
import { Spotlight } from "./Spotlight";

const SPOTLIGHTS = ["review", "actions", "ai"] as const;

const SPOTLIT: ReadonlySet<string> = new Set(SPOTLIGHTS);
const MORE_PAGES = FEATURE_PAGES.filter((page) => !SPOTLIT.has(page.slug));
const FEATURE_COUNT = FEATURE_CATALOG.reduce((total, group) => total + group.items.length, 0);

const HERO_POINTS = ["Open source under 0BSD", "Import from any Git remote", "GitHub Actions–style workflows"] as const;

const QUICKSTART = `git clone ${SOURCE_URL}.git gitfor && cd gitfor
bun install
bun run deploy`;

const SECTION = "border-t border-kumo-hairline pt-16";

const DEMO_VIDEO = { id: "gitfor-demo", version: "v1" } as const;
const DEMO_CAPTIONS = [
  { src: videoUrl(DEMO_VIDEO.id, DEMO_VIDEO.version, "captions/en.vtt"), srcLang: "en", label: "English" },
];

type Repos = Parameters<typeof RepoList>[0]["repos"];

export function Landing({ repos }: { repos: Repos }) {
  return (
    <>
      <PageContainer className="grid items-center gap-12 py-14 md:py-20 lg:grid-cols-2">
        <div className="animate-rise space-y-6">
          <DisplayTitle level={1} size="hero" title="Git hosting, code review and CI you can run yourself" />
          <p className="max-w-xl text-lg leading-8 text-kumo-subtle">
            gitfor hosts your repositories and the work around them: pull requests, workflows, issues, security scanning
            and sites. Use it here, or deploy your own instance to Cloudflare.
          </p>
          <div className="flex flex-wrap items-center gap-3 pt-2">
            <Link to="/signup" className={buttonClass("primary")}>
              Create an account
            </Link>
            <Link to="/self-host" className={buttonClass("secondary")}>
              Self-host gitfor
            </Link>
            <TextLink to="/explore" tone="subtle" className="ml-1 text-sm text-kumo-subtle">
              Explore public repositories
            </TextLink>
          </div>
          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-kumo-subtle">
            {HERO_POINTS.map((point) => (
              <li key={point}>{point}</li>
            ))}
          </ul>
        </div>
        <PullRequestDemo className="animate-rise" />
      </PageContainer>

      <PageContainer className="space-y-16 pt-8 pb-24">
        <section className={SECTION}>
          <DisplayTitle title="See gitfor in eight minutes" />
          <VideoPlayer
            {...DEMO_VIDEO}
            title="gitfor product demo"
            captions={DEMO_CAPTIONS}
            className="mt-6 border border-kumo-hairline"
          />
        </section>

        {SPOTLIGHTS.map((slug, index) => (
          <section key={slug} className={SECTION}>
            <Spotlight slug={slug} flip={index % 2 === 1} />
          </section>
        ))}

        <section className={SECTION}>
          <DisplayTitle title="More features" />
          <ul className="mt-6 divide-y divide-kumo-hairline">
            {MORE_PAGES.map((page) => (
              <li key={page.slug}>
                <Link
                  to="/features/$slug"
                  params={{ slug: page.slug }}
                  className="group grid gap-1 py-4 md:grid-cols-[14rem_1fr] md:gap-8"
                >
                  <span className="font-medium text-kumo-strong group-hover:text-accent-400">{page.nav}</span>
                  <span className="text-sm leading-6 text-kumo-subtle">{page.lede}</span>
                </Link>
              </li>
            ))}
          </ul>
          <TextLink to="/features" className="mt-4 inline-block text-sm">
            See all {FEATURE_COUNT} features
          </TextLink>
        </section>

        <section className={SECTION}>
          <div className="grid items-center gap-10 lg:grid-cols-2">
            <div className="space-y-4">
              <DisplayTitle title="Run your own instance" />
              <p className="max-w-lg leading-7 text-kumo-subtle">
                gitfor is open source under 0BSD, with no license keys. Deploy it to your own Cloudflare account and
                your repositories, issues and logs stay on infrastructure you control.
              </p>
              <Link to="/self-host" className={buttonClass("secondary")}>
                Read the self-hosting guide
              </Link>
            </div>
            <CodeBlock title="terminal" language="bash" source={QUICKSTART} />
          </div>
        </section>

        <section className={SECTION}>
          <Panel title="Recently updated public repositories">
            <RepoList repos={repos} empty="No public repositories yet." />
          </Panel>
        </section>

        <CtaBand
          title="Import a repository"
          body="Bring any repository over HTTPS with its full history, then invite your team."
        />
      </PageContainer>
    </>
  );
}