server-26/drb-frontend/app/settings/billing/page.tsx

"use client";

import { useEffect, useState } from "react";
import {
  PLANS, getPlan, getCurrentSubscription, getUsageSummary, getInvoices,
  createCheckoutSession, createBillingPortalSession,
  type Subscription, type UsageSummary, type Invoice, type PlanId,
} from "@/lib/billing";
import { Card, CardHeader } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { SkeletonCard } from "@/components/ui/Skeleton";
import { UnbuiltMarker } from "@/components/ui/UnbuiltMarker";

function fmtDate(iso: string) {
  return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}

function StatusBanner({ sub }: { sub: Subscription }) {
  if (sub.status === "trialing" && sub.trialEndsAt) {
    return (
      <div className="bg-indigo-600/10 border border-indigo-600/40 rounded-xl p-4 flex items-center justify-between gap-4 flex-wrap">
        <p className="text-sm text-indigo-300">
          Trial active — ends {fmtDate(sub.trialEndsAt)}. Add a payment method to keep your plan after that.
        </p>
        <Badge tone="brand">Trial</Badge>
      </div>
    );
  }
  if (sub.status === "past_due") {
    return (
      <div className="bg-red-600/10 border border-red-600/40 rounded-xl p-4 flex items-center justify-between gap-4 flex-wrap">
        <p className="text-sm text-red-400">
          Payment failed on your last invoice. Update your payment method to avoid losing access.
        </p>
        <Badge tone="danger">Past due</Badge>
      </div>
    );
  }
  if (sub.status === "canceled") {
    return (
      <div className="bg-yellow-600/10 border border-yellow-600/40 rounded-xl p-4 flex items-center justify-between gap-4 flex-wrap">
        <p className="text-sm text-yellow-400">Your subscription is canceled. Reactivate to restore full access.</p>
        <Badge tone="warning">Canceled</Badge>
      </div>
    );
  }
  return null;
}

function UsageBar({ label, used, limit }: { label: string; used: number; limit: number | "unlimited" }) {
  const pct = limit === "unlimited" ? 0 : Math.min(100, Math.round((used / Math.max(limit, 1)) * 100));
  const nearLimit = limit !== "unlimited" && used / limit >= 0.9;
  return (
    <div>
      <div className="flex items-baseline justify-between mb-1.5">
        <span className="text-xs text-ink-2 font-mono">{label}</span>
        <span className="text-xs font-mono text-ink-2">
          {used} / {limit === "unlimited" ? "∞" : limit}
        </span>
      </div>
      <div className="h-2 rounded-full bg-raised overflow-hidden">
        <div
          className={`h-full rounded-full transition-all ${nearLimit ? "bg-orange-500" : "bg-indigo-500"}`}
          style={{ width: limit === "unlimited" ? "8%" : `${pct}%` }}
        />
      </div>
    </div>
  );
}

/**
 * Gate A / A1 (server-26#46). The plan cards below render taglines that claim
 * entitlements with no backend behind them. Those claims get marked unbuilt
 * inline, on this screen, next to the plan that makes them. This is a labelling
 * change only — it does not build any of these, and it must never grow into a
 * price or a checkout path (Gate B still bars charging anyone).
 */
const UNBUILT_CLAIMS: Partial<Record<PlanId, string[]>> = {
  free: ["Retention window"],
  pro: ["Retention window"],
  enterprise: ["Custom retention", "SSO / SAML", "Uptime SLA", "Data residency"],
};

const INVOICE_TONE: Record<Invoice["status"], "success" | "warning" | "neutral" | "danger"> = {
  paid: "success",
  open: "warning",
  void: "neutral",
  uncollectible: "danger",
};

export default function BillingSettingsPage() {
  const [sub, setSub] = useState<Subscription | null>(null);
  const [usage, setUsage] = useState<UsageSummary | null>(null);
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [loading, setLoading] = useState(true);
  const [actionError, setActionError] = useState<string | null>(null);
  const [busyPlan, setBusyPlan] = useState<PlanId | null>(null);
  const [portalBusy, setPortalBusy] = useState(false);

  useEffect(() => {
    Promise.all([getCurrentSubscription(), getUsageSummary(), getInvoices()])
      .then(([s, u, i]) => { setSub(s); setUsage(u); setInvoices(i); })
      .finally(() => setLoading(false));
  }, []);

  async function handleChoosePlan(planId: PlanId) {
    setBusyPlan(planId);
    setActionError(null);
    try {
      const { url } = await createCheckoutSession(planId, sub?.interval ?? "monthly");
      window.location.href = url;
    } catch (e) {
      setActionError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusyPlan(null);
    }
  }

  async function handleManageBilling() {
    setPortalBusy(true);
    setActionError(null);
    try {
      const { url } = await createBillingPortalSession();
      window.location.href = url;
    } catch (e) {
      setActionError(e instanceof Error ? e.message : String(e));
    } finally {
      setPortalBusy(false);
    }
  }

  if (loading || !sub || !usage) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <SkeletonCard /><SkeletonCard />
      </div>
    );
  }

  const plan = getPlan(sub.planId);

  return (
    <div className="space-y-6 max-w-4xl">
      <p className="text-xs text-ink-muted font-mono">
        Demo data — this page isn&apos;t connected to a live payment processor. See lib/billing.ts for the integration plan.
      </p>

      <StatusBanner sub={sub} />

      {actionError && (
        <div className="bg-red-950 border border-red-800 rounded-lg p-4">
          <p className="text-red-400 text-sm">{actionError}</p>
        </div>
      )}

      <Card>
        <CardHeader
          title="Current plan"
          subtitle={sub.cancelAtPeriodEnd ? `Cancels ${sub.currentPeriodEnd ? fmtDate(sub.currentPeriodEnd) : "at period end"}` : sub.currentPeriodEnd ? `Renews ${fmtDate(sub.currentPeriodEnd)}` : undefined}
          action={<Badge tone={plan.id === "free" ? "neutral" : "brand"}>{plan.name}</Badge>}
        />
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <UsageBar label="Seats" used={usage.seatsUsed} limit={usage.seatsLimit} />
          <UsageBar label="Nodes" used={usage.nodesUsed} limit={usage.nodesLimit} />
        </div>
        <div className="mt-5 pt-5 border-t border-line">
          <Button variant="secondary" size="sm" onClick={handleManageBilling} disabled={portalBusy}>
            {portalBusy ? "Opening…" : "Manage payment method & invoices"}
          </Button>
        </div>
      </Card>

      <Card>
        <CardHeader title="Change plan" subtitle="Upgrading takes effect immediately; downgrading takes effect at the end of the current period." />
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {PLANS.map((p) => {
            const isCurrent = p.id === sub.planId;
            return (
              <div
                key={p.id}
                className={`rounded-xl border p-4 flex flex-col ${p.highlighted ? "border-indigo-600/40" : "border-line"}`}
              >
                <p className="text-white font-semibold text-sm">{p.name}</p>
                <p className="text-ink-muted text-xs mt-1 flex-1">{p.tagline}</p>
                {(UNBUILT_CLAIMS[p.id] ?? []).length > 0 && (
                  <div className="flex flex-wrap gap-1 mt-2">
                    {(UNBUILT_CLAIMS[p.id] ?? []).map((claim) => (
                      <UnbuiltMarker key={claim}>{claim} — not yet available</UnbuiltMarker>
                    ))}
                  </div>
                )}
                <p className="text-white text-lg font-bold font-mono mt-3">
                  {p.priceMonthlyUsd === null ? "Custom" : p.priceMonthlyUsd === 0 ? "Free" : `$${p.priceMonthlyUsd}/mo`}
                </p>
                <Button
                  className="mt-3"
                  size="sm"
                  variant={isCurrent ? "secondary" : "primary"}
                  disabled={isCurrent || busyPlan === p.id}
                  onClick={() => handleChoosePlan(p.id)}
                  fullWidth
                >
                  {isCurrent ? "Current plan" : busyPlan === p.id ? "Redirecting…" : p.priceMonthlyUsd === null ? "Contact sales" : "Switch"}
                </Button>
              </div>
            );
          })}
        </div>
      </Card>

      <Card>
        <CardHeader title="Invoice history" />
        {invoices.length === 0 ? (
          <p className="text-ink-muted text-sm">No invoices yet.</p>
        ) : (
          <div className="divide-y divide-line">
            {invoices.map((inv) => (
              <div key={inv.id} className="flex items-center justify-between gap-4 py-3">
                <div className="min-w-0">
                  <p className="text-ink text-sm">{inv.description}</p>
                  <p className="text-ink-muted text-xs font-mono">{fmtDate(inv.date)}</p>
                </div>
                <div className="flex items-center gap-3 shrink-0">
                  <span className="text-ink-2 text-sm font-mono">${inv.amountUsd.toFixed(2)}</span>
                  <Badge tone={INVOICE_TONE[inv.status]}>{inv.status}</Badge>
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  );
}