import { useEffect } from "react";
import type { getBilling } from "~/fns/billing";
import { openBillingPortal, startDomainAddonCheckout, startProCheckout, startTopupCheckout } from "~/fns/billing";
import { useAction } from "~/hooks/use-action";
import { formatQuantity, meterDef } from "~/lib/meters";
import { CREDIT_POOLS, CUSTOM_DOMAIN_LIMIT } from "~/lib/pricing";
import type { CreditPoolId } from "~/lib/pricing";
import { usd } from "~/lib/pricing-display";
import { trackEvent } from "~/lib/analytics";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { ComputeRatesNote } from "./ComputeRatesNote";
import { InfoTip } from "./InfoTip";
import { VerifyEmailHint } from "~/components/VerifyEmailHint";
import { useEmailUnverified } from "~/hooks/use-viewer";

type Billing = Awaited<ReturnType<typeof getBilling>>;
type Action = { reset: () => void };

function go(result: { url: string } | undefined, kind: string) {
  if (!result?.url) return;
  trackEvent("checkout_started", { kind });
  window.location.assign(result.url);
}

/**
 * Coming back from Stripe with the browser's back button can restore this page from the back-forward cache with
 * its buttons still pending; clear them so the page is usable again.
 */
function useResetOnRestore(...actions: Action[]) {
  useEffect(() => {
    const onShow = (event: PageTransitionEvent) => {
      if (event.persisted) for (const action of actions) action.reset();
    };
    window.addEventListener("pageshow", onShow);
    return () => window.removeEventListener("pageshow", onShow);
  });
}

const POOL_UNIT: Record<CreditPoolId, "seconds" | "tokens"> = { compute: "seconds", "ai.tokens": "tokens" };

function poolAmount(pool: CreditPoolId, quantity: number): string {
  if (pool === "compute") return `${formatQuantity("seconds", quantity)} of standard-1`;
  return `${formatQuantity("tokens", quantity)} tokens`;
}

function SubscriptionPanel({ billing, org }: { billing: Billing; org: string | null }) {
  const checkout = useAction(startProCheckout, { invalidate: false });
  const portal = useAction(openBillingPortal, { invalidate: false });
  const unverified = useEmailUnverified();
  useResetOnRestore(checkout, portal);
  const { stripe, account } = billing;
  const subscription = stripe.subscription;
  const active = Boolean(subscription?.status && ["active", "trialing", "past_due"].includes(subscription.status));
  const assigned = !subscription && billing.summary.plan.id === "pro";
  return (
    <Panel title="Subscription">
      <div className="flex flex-wrap items-center gap-4 p-4 text-sm">
        <div className="min-w-0 flex-1 space-y-1">
          <ErrorBanner message={checkout.error ?? portal.error} />
          {unverified && <VerifyEmailHint action="upgrade" />}
          {stripe.checkoutPaused && (
            <p className="text-amber-300">New purchases and plan changes are paused; you can still update your card.</p>
          )}
          {subscription ? (
            <p className="flex flex-wrap items-center gap-2 text-kumo-default">
              {billing.plans.pro.label} <Badge>{subscription.status ?? "unknown"}</Badge>
              {subscription.currentPeriodEnd && (
                <span className="text-kumo-subtle">
                  {subscription.cancelAtPeriodEnd ? "ends" : "renews"}{" "}
                  <RelativeTime timestamp={subscription.currentPeriodEnd} />
                </span>
              )}
            </p>
          ) : assigned ? (
            <p className="text-kumo-default">
              This account is on {billing.plans.pro.label}, assigned by a site administrator.
            </p>
          ) : (
            <>
              <p className="text-kumo-default">
                {billing.plans.pro.label} is {usd(billing.plans.pro.priceCents / 100)} per month
              </p>
              <p className="text-kumo-subtle">
                Bigger allowances (see Pricing below), and usage past them is billed at the listed rates instead of
                stopping.
              </p>
            </>
          )}
        </div>
        <div className="flex gap-2">
          {!active && !assigned && stripe.proAvailable && (
            <Button
              variant="primary"
              disabled={!account.canEdit || unverified}
              pending={checkout.pending}
              onClick={async () => go(await checkout.run({ data: { org } }), "pro")}
            >
              Upgrade to {billing.plans.pro.label}
            </Button>
          )}
          {stripe.hasCustomer && (
            <Button
              disabled={!account.canEdit}
              pending={portal.pending}
              onClick={async () => go(await portal.run({ data: { org } }), "portal")}
            >
              Manage billing
            </Button>
          )}
        </div>
      </div>
    </Panel>
  );
}

function DomainAddonPanel({ billing, org }: { billing: Billing; org: string | null }) {
  const checkout = useAction(startDomainAddonCheckout, { invalidate: false });
  const unverified = useEmailUnverified();
  useResetOnRestore(checkout);
  const addon = billing.stripe.domainAddon;
  if (!addon.available) return null;
  const active = Boolean(addon.status && ["active", "trialing", "past_due"].includes(addon.status));
  return (
    <Panel title="Custom domains">
      <div className="flex flex-wrap items-center gap-4 p-4 text-sm">
        <div className="min-w-0 flex-1 space-y-1">
          <ErrorBanner message={checkout.error} />
          {unverified && <VerifyEmailHint action="add custom domains" />}
          <p className="text-kumo-default">
            {usd(addon.priceCents / 100)} per custom domain per month, up to {CUSTOM_DOMAIN_LIMIT} per account
          </p>
          <p className="flex flex-wrap items-center gap-2 text-kumo-subtle">
            {addon.status ? <Badge>{addon.status}</Badge> : "Not added"}
            {active && <span>{addon.quantity} billed</span>}
          </p>
        </div>
        {!active && (
          <Button
            variant="primary"
            disabled={!billing.account.canEdit || unverified}
            pending={checkout.pending}
            onClick={async () => go(await checkout.run({ data: { org } }), "custom_domains")}
          >
            Add custom domains
          </Button>
        )}
      </div>
    </Panel>
  );
}

function CreditsPanel({ billing, org }: { billing: Billing; org: string | null }) {
  const topup = useAction(startTopupCheckout, { invalidate: false });
  const unverified = useEmailUnverified();
  useResetOnRestore(topup);
  const pools = Object.values(CREDIT_POOLS);
  return (
    <Panel title="Prepaid credit">
      <div className="space-y-4 p-4 text-sm">
        <ErrorBanner message={topup.error} />
        {unverified && <VerifyEmailHint action="buy credit" />}
        <p className="text-kumo-subtle">
          Credit is spent after your plan's included usage and before any overage, at the same rates. It never expires.
        </p>
        {pools.map((pool) => {
          const packs = billing.stripe.packs.filter((pack) => pack.pool === pool.id);
          const balance = billing.summary.credits[pool.id] ?? 0;
          return (
            <section key={pool.id} className="space-y-2" aria-label={pool.label}>
              <div className="flex flex-wrap items-center gap-2">
                <h3 className="text-kumo-default">{pool.label}</h3>
                {pool.id === "compute" && (
                  <InfoTip label="How compute credit is spent">
                    <ComputeRatesNote />
                  </InfoTip>
                )}
                <span className="ml-auto font-mono text-kumo-default">
                  {balance > 0 ? `${poolAmount(pool.id, balance)} left` : "No credit"}
                </span>
              </div>
              {packs.length > 0 && (
                <ul className="grid gap-2 sm:grid-cols-3">
                  {packs.map((pack) => (
                    <li
                      key={pack.id}
                      className="flex flex-col gap-2 rounded-md border border-kumo-hairline bg-kumo-base/40 p-3"
                    >
                      <span className="text-kumo-default">{pack.label}</span>
                      <span className="font-mono text-lg text-kumo-strong">{usd(pack.cents / 100)}</span>
                      <Button
                        size="sm"
                        disabled={!billing.account.canEdit || unverified || topup.pending}
                        onClick={async () => go(await topup.run({ data: { org, pack: pack.id } }), pack.id)}
                      >
                        Buy
                      </Button>
                    </li>
                  ))}
                </ul>
              )}
            </section>
          );
        })}
        {!billing.account.canEdit && <p className="text-xs text-kumo-subtle">Only account owners can buy credit.</p>}
        {billing.ledger.length > 0 && (
          <details className="text-xs text-kumo-subtle">
            <summary className="cursor-pointer text-kumo-default">Credit history</summary>
            <ul className="mt-2 divide-y divide-kumo-hairline">
              {billing.ledger.map((entry) => {
                const pool = entry.meter as CreditPoolId;
                const unit = POOL_UNIT[pool] ?? meterDef(entry.meter)?.unit ?? "count";
                return (
                  <li key={entry.ref} className="flex items-center gap-3 py-1.5">
                    <Badge>{entry.kind}</Badge>
                    <span>{CREDIT_POOLS[pool]?.label ?? entry.meter}</span>
                    <span className="font-mono">
                      {entry.quantity > 0 ? "+" : ""}
                      {formatQuantity(unit, entry.quantity)}
                    </span>
                    <span className="ml-auto">
                      <RelativeTime timestamp={entry.createdAt} />
                    </span>
                  </li>
                );
              })}
            </ul>
          </details>
        )}
      </div>
    </Panel>
  );
}

/** Stripe-backed controls; without STRIPE_SECRET_KEY they collapse to a single "not configured" note. */
export function StripePanels({ billing, org }: { billing: Billing; org: string | null }) {
  if (!billing.stripe.enabled) {
    return (
      <p className="text-xs text-kumo-subtle" data-testid="billing-not-configured">
        Billing is not configured on this instance; plans are assigned by a site administrator.
      </p>
    );
  }
  return (
    <>
      <SubscriptionPanel billing={billing} org={org} />
      <DomainAddonPanel billing={billing} org={org} />
      <CreditsPanel billing={billing} org={org} />
    </>
  );
}