import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { dismissProNudge, getProPitch } from "~/fns/pro";
import { useAction } from "~/hooks/use-action";
import { MarketingHero } from "~/components/marketing/MarketingHero";
import { DisplayTitle } from "~/components/marketing/DisplayTitle";
import { ProBadge } from "~/components/billing/ProBadge";
import { PageContainer } from "~/ui/PageContainer";
import { buttonClass } from "~/ui/Button";
import { formatQuantity, meterDef } from "~/lib/meters";
import type { MeterId } from "~/lib/meters";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/pricing")({
  loader: () => getProPitch(),
  head: ({ match }) => ({
    meta: seo({
      origin: match.context.publicUrl,
      path: "/pricing",
      title: "gitfor Pro",
      description: "More CI, more storage, hourly mirroring and AI merge fixes, and a forge that stays independent.",
    }),
  }),
  component: PricingPage,
});

type Perk = { title: string; body: string; meters: MeterId[] };

const PERKS: Perk[] = [
  {
    title: "CI that keeps up",
    body: "More cloud runner hours, plus bigger standard-2 runners for the builds that need them, and a roomier Actions cache so warm builds stay warm.",
    meters: ["compute.runner", "compute.runner_large", "storage.ci_cache"],
  },
  {
    title: "Room for the big repos",
    body: "Generous repository and LFS storage, so the monorepo, the design assets and the test fixtures can all move in.",
    meters: ["storage.artifacts", "storage.lfs", "network.lfs"],
  },
  {
    title: "A browser editor you can live in",
    body: "Ten times the editor container hours: open a repo, get a full dev environment, push without ever cloning.",
    meters: ["compute.editor"],
  },
  {
    title: "Sites that can take a hug",
    body: "Millions of requests and a terabyte of egress for your sites. Launch day stops being scary.",
    meters: ["compute.site_requests", "network.sites", "storage.sites"],
  },
  {
    title: "AI merge fixes and PR write-ups",
    body: "Twenty times the AI calls for resolving merge conflicts and drafting pull request descriptions.",
    meters: ["ai.calls"],
  },
];

const EXTRAS = [
  {
    title: "Hourly mirroring",
    body: "Repository mirrors sync every hour instead of daily, with ten times the push- and webhook-triggered syncs.",
  },
  {
    title: "Grow past the limits, on your terms",
    body: "Free stops at its allowances. Pro keeps going at the same per-unit rates, capped by a spending limit you choose.",
  },
  {
    title: "A little badge",
    body: "A modest Pro badge on your profile. Tasteful. Understated. Entirely deserved.",
  },
];

function allowance(meter: MeterId, value: number | undefined): string {
  const def = meterDef(meter);
  if (!def || !value) return "—";
  return formatQuantity(def.unit, value);
}

function PricingPage() {
  const data = Route.useLoaderData();
  const navigate = useNavigate();
  const dismiss = useAction(dismissProNudge, { invalidate: false });
  const price = `$${(data.priceCents / 100).toFixed(0)}`;
  const cta = data.supporter ? (
    <Link to="/settings/billing" className={buttonClass("secondary")}>
      Manage billing
    </Link>
  ) : data.signedIn ? (
    <Link to="/settings/billing" className={buttonClass("primary")}>
      Upgrade to Pro · {price}/month
    </Link>
  ) : (
    <Link to="/signup" className={buttonClass("primary")}>
      Create an account
    </Link>
  );

  return (
    <>
      <MarketingHero
        title={data.supporter ? "Thanks for being Pro" : "gitfor, with the dials turned up"}
        lede={
          data.supporter
            ? "You already have everything on this page. Here's what your support pays for."
            : `Free gets you a whole forge. Pro, at ${price} a month, gives you more room in every corner of it, and keeps an independent, open-source forge running for everyone.`
        }
        actions={
          <>
            {cta}
            {data.nudge ? (
              <button
                type="button"
                className={buttonClass("ghost")}
                onClick={async () => {
                  await dismiss.run({});
                  await navigate({ to: "/" });
                }}
              >
                Maybe later
              </button>
            ) : null}
          </>
        }
      />
      <PageContainer className="space-y-20 pb-24">
        <div className="divide-y divide-kumo-hairline">
          {PERKS.map((perk) => (
            <section key={perk.title} className="grid gap-4 py-8 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] md:gap-12">
              <div className="space-y-2">
                <h2 className="text-lg font-semibold text-kumo-strong">{perk.title}</h2>
                <p className="leading-7 text-kumo-subtle">{perk.body}</p>
              </div>
              <dl className="grid content-start gap-2 text-sm">
                {perk.meters.map((meter) => (
                  <div
                    key={meter}
                    className="flex items-baseline justify-between gap-4 border-b border-kumo-hairline pb-2"
                  >
                    <dt className="text-kumo-default">{meterDef(meter)?.label ?? meter}</dt>
                    <dd className="font-mono text-kumo-subtle">
                      {allowance(meter, data.free[meter])} <span aria-hidden>→</span>{" "}
                      <span className="text-kumo-strong">{allowance(meter, data.pro[meter])}</span>
                    </dd>
                  </div>
                ))}
              </dl>
            </section>
          ))}
          <section className="grid gap-8 py-8 md:grid-cols-3">
            {EXTRAS.map((extra) => (
              <div key={extra.title} className="space-y-2">
                <h2 className="flex items-center gap-2 text-lg font-semibold text-kumo-strong">
                  {extra.title}
                  {extra.title === "A little badge" ? <ProBadge /> : null}
                </h2>
                <p className="leading-7 text-kumo-subtle">{extra.body}</p>
              </div>
            ))}
          </section>
        </div>
        <section className="space-y-6 border-t border-kumo-hairline pt-12">
          <DisplayTitle title="And one more thing" />
          <p className="max-w-2xl leading-7 text-kumo-subtle">
            gitfor is open source and has no investors to answer to. Pro subscriptions pay for the servers, the runners
            and the people who keep it all going, so the free tier can stay generous for everyone else.
          </p>
          <div className="flex flex-wrap gap-3">{cta}</div>
          {!data.billingEnabled ? (
            <p className="text-sm text-kumo-subtle">
              This instance doesn't sell subscriptions; everything is on the house.
            </p>
          ) : null}
          <p className="max-w-2xl pt-6 text-lg leading-8 text-kumo-default">
            And from us over at gitfor, our undying gratitude.
          </p>
        </section>
      </PageContainer>
    </>
  );
}