import { apiFetch } from "@/lib/api";
import { BillingPanel } from "@/components/billing-panel";

async function load() {
  const res = await apiFetch("/v1/billing/status");
  if (!res.ok) return { tier: "free", polarSubscriptionId: null, canceledAt: null };
  return res.json();
}

export default async function BillingPage({ searchParams }: { searchParams: { status?: string } }) {
  const data = await load();
  return (
    <div>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-1">Billing</h1>
        <p className="text-white/50 text-sm">Upgrade for unlimited clients + invoices + email-to-client.</p>
      </div>
      {searchParams.status === "success" && (
        <div className="bg-emerald-500/10 border border-emerald-500/30 rounded-xl p-4 mb-6 flex items-center gap-3">
          <span className="text-2xl">✓</span>
          <span>Payment processed.</span>
        </div>
      )}
      <BillingPanel initial={data} />
    </div>
  );
}