import { useEffect } from "react";
import { Dialog } from "@cloudflare/kumo/components/dialog";
import { useQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import { getUpsellInfo, startProCheckout, startTopupCheckout } from "~/fns/billing";
import { useAction } from "~/hooks/use-action";
import { trackEvent } from "~/lib/analytics";
import { formatQuantity } from "~/lib/meters";
import type { MeterDef } from "~/lib/meters";
import { usd } from "~/lib/pricing-display";
import { dismissUpsell, useUpsell } from "~/lib/upsell";
import type { PaymentDetail } from "~/lib/upsell";
import { Button, buttonClass } from "~/ui/Button";
import { useViewer } from "~/hooks/use-viewer";
import { ErrorBanner } from "~/ui/Callout";
import { VerifyEmailHint } from "~/components/VerifyEmailHint";
import { canWriteAsViewer } from "~/lib/email-verification";

function allowance(unit: MeterDef["unit"] | undefined, value: number | null): string {
  if (value === null) return "unlimited";
  if (value === 0) return "none";
  return formatQuantity(unit ?? "count", value);
}

const HEADLINES: Record<PaymentDetail["reason"], string> = {
  plan_limit: "You've reached this month's limit",
  spending_limit: "You've reached your spending limit",
  paid_feature: "This needs a paid plan",
};

function OwnerMustUpgrade({ detail }: { detail: PaymentDetail }) {
  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <Dialog.Title className="text-base font-semibold text-kumo-strong">{HEADLINES[detail.reason]}</Dialog.Title>
        <p className="text-sm text-kumo-default">{detail.message}</p>
        <p className="text-sm text-kumo-subtle">
          This limit belongs to the account that owns this work. Ask its owner to upgrade, add credit or raise the
          spending limit.
        </p>
      </div>
      <div className="flex justify-end gap-2 border-t border-kumo-hairline pt-3">
        <Button variant="ghost" onClick={dismissUpsell}>
          Close
        </Button>
        <Link to="/settings/billing" className={buttonClass("secondary")} onClick={dismissUpsell}>
          See pricing
        </Link>
      </div>
    </div>
  );
}

function UpsellBody({ detail }: { detail: PaymentDetail }) {
  const viewer = useViewer();
  const org = detail.account?.kind === "org" ? detail.account.name : null;
  // getUpsellInfo resolves the viewer's own account or one of their orgs; a site admin looking at another
  // user's account only gets the link.
  const fetchable = org !== null || detail.account?.name === viewer?.name;
  const info = useQuery({
    queryKey: ["upsell", org, detail.meter],
    queryFn: () => getUpsellInfo({ data: { org, meter: detail.meter } }),
    staleTime: 60_000,
    enabled: fetchable,
  });
  const checkout = useAction(startProCheckout, { invalidate: false });
  const topup = useAction(startTopupCheckout, { invalidate: false });
  const go = (result: { url: string } | undefined, kind: string) => {
    if (!result?.url) return;
    trackEvent("upsell_checkout_started", { kind, meter: detail.meter, reason: detail.reason });
    window.location.assign(result.url);
  };
  const data = info.data;
  const billingPath = detail.billingPath ?? (org ? `/orgs/${org}/billing` : "/settings/billing");
  const unit = data?.meter?.unit as MeterDef["unit"] | undefined;
  const canUpgrade = Boolean(
    data && data.billingEnabled && data.pro.available && !data.plan.billsOverage && detail.reason !== "spending_limit",
  );
  const verified = canWriteAsViewer(viewer);
  const canEdit = (data?.account.canEdit ?? false) && verified;
  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <Dialog.Title className="text-base font-semibold text-kumo-strong">{HEADLINES[detail.reason]}</Dialog.Title>
        <p className="text-sm text-kumo-default">{detail.message}</p>
        {detail.account && (
          <p className="text-xs text-kumo-subtle">
            Account: <span className="text-kumo-default">{detail.account.name}</span>
            {data ? ` · ${data.plan.label} plan` : ""}
          </p>
        )}
      </div>

      {data?.meter && (
        <table className="w-full text-sm">
          <tbody className="divide-y divide-kumo-hairline">
            {[
              { label: "Used this month", value: data.used === null ? null : allowance(unit, data.used) },
              { label: "Free includes", value: allowance(unit, data.included.free) },
              {
                label: `${data.pro.label} includes (${usd(data.pro.priceCents / 100)}/month)`,
                value: allowance(unit, data.included.pro),
              },
              { label: "Beyond that, or with credit", value: data.rate },
            ]
              .filter((row) => row.value)
              .map((row) => (
                <tr key={row.label}>
                  <td className="py-1.5 text-kumo-subtle">{row.label}</td>
                  <td className="py-1.5 text-right font-mono text-kumo-default">{row.value}</td>
                </tr>
              ))}
          </tbody>
        </table>
      )}

      <ErrorBanner
        message={checkout.error ?? topup.error ?? (info.isError ? "Couldn't load pricing for this account" : null)}
      />

      {data && !data.billingEnabled ? (
        <p className="text-sm text-kumo-subtle">
          Billing isn't set up on this instance. Ask a site administrator to change this account's plan.
        </p>
      ) : (
        <div className="space-y-3">
          {!verified && <VerifyEmailHint action="upgrade or buy credit" />}
          {canUpgrade && (
            <Button
              variant="primary"
              className="w-full"
              disabled={!canEdit}
              pending={checkout.pending}
              onClick={async () => go(await checkout.run({ data: { org } }), "pro")}
            >
              Upgrade to {data?.pro.label} for {usd((data?.pro.priceCents ?? 0) / 100)}/month
            </Button>
          )}
          {data && data.packs.length > 0 && (
            <div className="space-y-2">
              <p className="text-xs text-kumo-subtle">Or buy prepaid credit, which never expires:</p>
              <div className="grid gap-2 sm:grid-cols-3">
                {data.packs.map((pack) => (
                  <Button
                    key={pack.id}
                    size="sm"
                    className="h-auto flex-col gap-0.5 py-2 whitespace-normal"
                    disabled={!canEdit || topup.pending}
                    onClick={async () => go(await topup.run({ data: { org, pack: pack.id } }), pack.id)}
                  >
                    <span className="text-xs text-kumo-subtle">{pack.label}</span>
                    <span className="font-mono">{usd(pack.cents / 100)}</span>
                  </Button>
                ))}
              </div>
            </div>
          )}
          {detail.reason === "spending_limit" && (
            <p className="text-sm text-kumo-subtle">Raise or remove the monthly spending limit on the billing page.</p>
          )}
          {data && !canEdit && (
            <p className="text-xs text-kumo-subtle">Only the account owner can upgrade or buy credit.</p>
          )}
        </div>
      )}

      <div className="flex justify-end gap-2 border-t border-kumo-hairline pt-3">
        <Button variant="ghost" onClick={dismissUpsell}>
          Not now
        </Button>
        <Link to={billingPath} className={buttonClass("secondary")} onClick={dismissUpsell}>
          Billing and pricing
        </Link>
      </div>
    </div>
  );
}

/** One app-wide dialog that opens whenever an action comes back 402 Payment Required. */
export function UpsellDialog() {
  const detail = useUpsell();
  useEffect(() => {
    if (detail) trackEvent("upsell_shown", { meter: detail.meter, reason: detail.reason });
  }, [detail]);
  return (
    <Dialog.Root open={detail !== null} onOpenChange={(open) => !open && dismissUpsell()}>
      <Dialog size="lg" className="p-5">
        {detail &&
          (detail.manageable ? (
            <UpsellBody key={`${detail.meter}:${detail.reason}:${detail.account?.name ?? ""}`} detail={detail} />
          ) : (
            <OwnerMustUpgrade detail={detail} />
          ))}
      </Dialog>
    </Dialog.Root>
  );
}