import { createFileRoute, Link } from "@tanstack/react-router";
import { MarketingHero } from "~/components/marketing/MarketingHero";
import { LOCAL_DEV, SELF_HOST_REQUIREMENTS, SELF_HOST_STEPS } from "~/lib/marketing/self-host";
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 { ExternalLink } from "~/ui/TextLink";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/self-host")({
  head: ({ match }) => ({
    meta: seo({
      origin: match.context.publicUrl,
      path: "/self-host",
      title: "Self-host · gitfor",
      description: "Run your own gitfor instance: requirements, setup, deploy and runners.",
    }),
  }),
  component: SelfHostPage,
});

function SelfHostPage() {
  return (
    <>
      <MarketingHero
        title="Self-host gitfor"
        lede="gitfor is open source under 0BSD. Deploy it to your own Cloudflare account, and your repositories, issues, logs and artifacts are stored there."
        actions={
          <>
            <a href={SOURCE_URL} rel="noreferrer" className={buttonClass("primary")}>
              View the source
            </a>
            <Link to="/features" className={buttonClass("secondary")}>
              See the features
            </Link>
          </>
        }
      />
      <PageContainer className="grid gap-12 pb-24 lg:grid-cols-[18rem_1fr]">
        <aside className="space-y-4 lg:sticky lg:top-20 lg:self-start">
          <Panel title="You'll need" padding="md">
            <ul className="list-disc space-y-1.5 pl-4 text-sm leading-6 text-kumo-default marker:text-gray-600">
              {SELF_HOST_REQUIREMENTS.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </Panel>
          <p className="text-xs leading-5 text-kumo-subtle">
            The{" "}
            <ExternalLink href={`${SOURCE_URL}/blob/master/docs/self-hosting.md`} rel="noreferrer">
              self-hosting guide
            </ExternalLink>{" "}
            documents every setting, including the Sites domain and GitHub sign-in.
          </p>
        </aside>

        <ol className="space-y-12">
          {SELF_HOST_STEPS.map((step, index) => (
            <li key={step.title} className="grid gap-4 md:grid-cols-[3rem_1fr]">
              <span
                aria-hidden
                className="grid size-8 place-items-center rounded-full bg-kumo-fill font-mono text-sm text-kumo-default"
              >
                {index + 1}
              </span>
              <div className="min-w-0 space-y-4 md:pt-0.5">
                <h2 className="text-lg font-medium text-kumo-strong">{step.title}</h2>
                <p className="max-w-2xl leading-7 text-kumo-subtle">{step.body}</p>
                {step.code && <CodeBlock title="terminal" language="bash" source={step.code} />}
              </div>
            </li>
          ))}
        </ol>
        <section className="space-y-4 border-t border-kumo-hairline pt-10 md:pl-16 lg:col-start-2">
          <h2 className="text-lg font-medium text-kumo-strong">Local development</h2>
          <p className="max-w-2xl leading-7 text-kumo-subtle">
            To work on gitfor itself, run it locally. The dev server uses your real Artifacts namespace, so you work
            against live repositories.
          </p>
          <CodeBlock title="terminal" language="bash" source={LOCAL_DEV} />
        </section>
      </PageContainer>
    </>
  );
}