buildmymcpserver/apps/web/app/(dashboard)/settings/billing/page.tsx

'use client';

import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api';
import { Loader2 } from 'lucide-react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useCallback, useEffect, useState } from 'react';

type Plan = 'hobby' | 'pro' | 'team' | 'enterprise';
type Tier = 'pro_monthly' | 'pro_yearly' | 'team_monthly' | 'team_yearly';

interface BillingStatus {
  plan: Plan;
  hasCustomer: boolean;
  hasSubscription: boolean;
  suspended: boolean;
  suspendedReason: string | null;
}

const PLAN_LABEL: Record<Plan, string> = {
  hobby: 'Hobby (free)',
  pro: 'Pro',
  team: 'Team',
  enterprise: 'Enterprise',
};

function BillingInner() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const justSubscribed = searchParams.get('success') === 'true';
  const cancelledCheckout = searchParams.get('cancelled') === 'true';
  const autoUpgradeTier = searchParams.get('tier') as Tier | null;

  const [status, setStatus] = useState<BillingStatus | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);

  const loadStatus = useCallback(() => {
    apiFetch<BillingStatus>('/v1/billing/status')
      .then(setStatus)
      .catch((e) => {
        const err = e as { status?: number };
        if (err.status === 401) router.push('/login?returnTo=/settings/billing');
        else setError((e as Error).message);
      });
  }, [router]);

  useEffect(() => {
    loadStatus();
  }, [loadStatus]);

  // Came back from Stripe Checkout? Poll briefly — the webhook usually arrives
  // within a couple seconds and flips the plan.
  useEffect(() => {
    if (!justSubscribed) return;
    let tries = 0;
    const id = setInterval(() => {
      tries += 1;
      loadStatus();
      if (tries >= 6) clearInterval(id);
    }, 1500);
    return () => clearInterval(id);
  }, [justSubscribed, loadStatus]);

  const startCheckout = useCallback(
    async (tier: Tier) => {
      setBusy(tier);
      setError(null);
      try {
        const res = await apiFetch<{ url: string }>('/v1/billing/checkout-session', {
          method: 'POST',
          body: JSON.stringify({ tier }),
        });
        window.location.href = res.url;
      } catch (e) {
        setBusy(null);
        const detail = (e as { detail?: { detail?: string; error?: string } }).detail;
        setError(detail?.detail ?? detail?.error ?? (e as Error).message);
      }
    },
    [],
  );

  // Auto-fire checkout when the user lands here from the pricing page CTA.
  useEffect(() => {
    if (!autoUpgradeTier || !status) return;
    if (status.hasSubscription) return; // already paying — don't redirect
    void startCheckout(autoUpgradeTier);
  }, [autoUpgradeTier, status, startCheckout]);

  async function openPortal() {
    setBusy('portal');
    setError(null);
    try {
      const res = await apiFetch<{ url: string }>('/v1/billing/portal', {
        method: 'POST',
        body: '{}',
      });
      window.location.href = res.url;
    } catch (e) {
      setBusy(null);
      const detail = (e as { detail?: { detail?: string; error?: string } }).detail;
      setError(detail?.detail ?? detail?.error ?? (e as Error).message);
    }
  }

  if (!status && !error) {
    return (
      <div className="mx-auto max-w-3xl px-6 py-12 text-center">
        <Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
        <p className="mt-3 text-[13px] text-[--color-fg-muted]">Loading billing…</p>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-3xl px-6 py-10">
      <div>
        <h1 className="text-[22px] font-semibold tracking-tight">Billing</h1>
        <p className="mt-1 text-[13px] text-[--color-fg-muted]">
          Manage your subscription, payment method, and invoices.
        </p>
      </div>

      {cancelledCheckout && (
        <div className="mt-4 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-3.5 py-2.5 text-[12.5px]">
          Checkout cancelled. No charge made.
        </div>
      )}
      {justSubscribed && (
        <div className="mt-4 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3.5 py-2.5 text-[12.5px]">
          Subscription active. Plan will update within a few seconds — refreshing…
        </div>
      )}
      {status?.suspended && (
        <div className="mt-4 rounded-md border border-amber-500/40 bg-amber-500/10 px-3.5 py-2.5 text-[12.5px]">
          <strong>Subscription paused</strong> — {status.suspendedReason ?? 'payment issue'}.
          Update your payment method below to restore access. Existing servers keep running.
        </div>
      )}
      {error && (
        <div className="mt-4 rounded-md border border-[--color-danger]/40 bg-[--color-danger]/10 px-3.5 py-2.5 text-[12.5px] text-[--color-fg]">
          {error}
        </div>
      )}

      {status && (
        <div className="panel mt-6 p-5">
          <div className="flex items-baseline justify-between">
            <div>
              <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
                Current plan
              </div>
              <div className="mt-1 text-[20px] font-semibold tracking-tight">
                {PLAN_LABEL[status.plan]}
              </div>
            </div>
            {status.hasSubscription && (
              <Button
                variant="secondary"
                size="md"
                onClick={openPortal}
                disabled={busy === 'portal'}
              >
                {busy === 'portal' ? 'Opening…' : 'Manage billing'}
              </Button>
            )}
          </div>
          {!status.hasSubscription && (
            <p className="mt-3 text-[12.5px] text-[--color-fg-muted]">
              You&apos;re on the free tier. Upgrade below to unlock more servers, faster Claude
              analysis and higher daily limits.
            </p>
          )}
        </div>
      )}

      {status && !status.hasSubscription && (
        <>
          <h2 className="mt-10 text-[15px] font-semibold tracking-tight">Choose a plan</h2>
          <div className="mt-3 grid gap-3 md:grid-cols-2">
            <TierCard
              name="Pro"
              monthly={49}
              yearly={490}
              features={['5 MCP servers', '1M tool calls / mo', 'Custom domain', 'Claude Haiku 4.5']}
              busy={busy}
              onSubscribe={startCheckout}
              monthlyTier="pro_monthly"
              yearlyTier="pro_yearly"
              highlight
            />
            <TierCard
              name="Team"
              monthly={199}
              yearly={1990}
              features={[
                '25 MCP servers',
                '10M tool calls / mo',
                'RBAC + audit log',
                'Claude Sonnet 4.6',
              ]}
              busy={busy}
              onSubscribe={startCheckout}
              monthlyTier="team_monthly"
              yearlyTier="team_yearly"
            />
          </div>
          <p className="mt-4 text-[12px] text-[--color-fg-subtle]">
            Annual saves 2 months. VAT calculated automatically based on your billing address. Cancel
            any time from the billing portal — service continues until end of period.
          </p>
          <p className="mt-2 text-[12px] text-[--color-fg-subtle]">
            Need Enterprise (BYOC, SSO, EU-data-residency)?{' '}
            <a
              className="text-[--color-accent] hover:underline"
              href="mailto:sales@buildmymcpserver.com"
            >
              Contact sales
            </a>
            .
          </p>
        </>
      )}

      <div className="mt-10 text-[12px] text-[--color-fg-subtle]">
        <Link href="/pricing" className="hover:text-[--color-fg]">
          ← Compare all plans
        </Link>
      </div>
    </div>
  );
}

function TierCard({
  name,
  monthly,
  yearly,
  features,
  busy,
  onSubscribe,
  monthlyTier,
  yearlyTier,
  highlight,
}: {
  name: string;
  monthly: number;
  yearly: number;
  features: string[];
  busy: string | null;
  onSubscribe: (tier: Tier) => void;
  monthlyTier: Tier;
  yearlyTier: Tier;
  highlight?: boolean;
}) {
  return (
    <div
      className={`panel flex h-full flex-col p-4 ${highlight ? 'border-[--color-accent]/40' : ''}`}
    >
      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{name}</div>
      <div className="mt-1 flex items-baseline gap-1">
        <span className="text-[24px] font-semibold tracking-tight">€{monthly}</span>
        <span className="text-[12px] text-[--color-fg-subtle]">/ month</span>
      </div>
      <ul className="mt-3 space-y-1 text-[12.5px] text-[--color-fg-muted]">
        {features.map((f) => (
          <li key={f}>— {f}</li>
        ))}
      </ul>
      <div className="mt-4 flex flex-col gap-2">
        <Button
          variant={highlight ? 'primary' : 'secondary'}
          size="md"
          onClick={() => onSubscribe(monthlyTier)}
          disabled={Boolean(busy)}
        >
          {busy === monthlyTier ? 'Redirecting…' : `Subscribe — €${monthly}/mo`}
        </Button>
        <Button
          variant="ghost"
          size="md"
          onClick={() => onSubscribe(yearlyTier)}
          disabled={Boolean(busy)}
        >
          {busy === yearlyTier ? 'Redirecting…' : `Or €${yearly}/year — 2 months free`}
        </Button>
      </div>
    </div>
  );
}

export default function BillingPage() {
  return (
    <Suspense
      fallback={
        <div className="mx-auto max-w-3xl px-6 py-12 text-center">
          <Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
        </div>
      }
    >
      <BillingInner />
    </Suspense>
  );
}