"use client";

/**
 * Admin → Plans & Pricing
 * ───────────────────────
 * Coming-soon placeholder until Stripe ships. Reads the same
 * PLANS registry the customer pricing page renders so the catalog
 * stays in sync, but admin actions (subscription mgmt, manual
 * plan overrides at scale) wait on the billing integration.
 */

import Link from "next/link";
import { CreditCard, Lock, ExternalLink } from "lucide-react";
import { PLANS } from "@/lib/plan-config";

export default function AdminBillingPage() {
  const plans = (Object.values(PLANS)).filter((p) => p.id !== "trial");

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
          <CreditCard className="w-5 h-5 text-slate-700" /> Plans &amp; Pricing
        </h1>
        <p className="text-slate-500 text-sm mt-1">
          Plan catalog + admin billing tooling.
        </p>
      </div>

      <div className="rounded-xl border border-amber-200 bg-amber-50 px-5 py-4 flex items-start gap-3">
        <Lock className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
        <div className="flex-1">
          <p className="text-sm font-bold text-amber-900">Stripe integration coming soon</p>
          <p className="text-xs text-amber-800/80 mt-0.5 leading-relaxed">
            Per-brand plan changes, prorated upgrades, invoice history, and the customer portal
            land alongside Stripe. Today plan overrides happen via the per-brand PATCH at
            <span className="font-mono"> /admin/brands</span> → detail panel.
          </p>
          <Link
            href="/pricing"
            className="inline-flex items-center gap-1 text-xs font-semibold text-amber-700 mt-2 hover:underline"
          >
            View customer-facing pricing <ExternalLink className="w-3 h-3" />
          </Link>
        </div>
      </div>

      {/* Plan catalog reference — same data as /pricing reads */}
      <div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
        <div className="px-4 py-3 border-b border-slate-100 font-bold text-slate-800 text-sm">
          Plan catalog
        </div>
        <table className="w-full text-sm">
          <thead className="bg-slate-50 border-b border-slate-200">
            <tr className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">
              <th className="text-left px-4 py-3">Plan</th>
              <th className="text-right px-3 py-3">Monthly</th>
              <th className="text-right px-3 py-3">Annual / mo</th>
              <th className="text-right px-3 py-3">Brands</th>
              <th className="text-right px-3 py-3">Seats</th>
              <th className="text-right px-3 py-3">AI credits</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {plans.map((p) => (
              <tr key={p.id}>
                <td className="px-4 py-2.5 text-xs font-bold text-slate-800">{p.name}</td>
                <td className="px-3 py-2.5 text-right text-xs text-slate-700 tabular-nums">
                  {p.monthlyPrice == null ? "Custom" : `$${p.monthlyPrice.toLocaleString()}`}
                </td>
                <td className="px-3 py-2.5 text-right text-xs text-slate-700 tabular-nums">
                  {p.annualMonthlyPrice == null ? "Custom" : `$${p.annualMonthlyPrice.toLocaleString()}`}
                </td>
                <td className="px-3 py-2.5 text-right text-xs text-slate-700 tabular-nums">
                  {p.limits.maxBrands === "unlimited" ? "∞" : p.limits.maxBrands}
                </td>
                <td className="px-3 py-2.5 text-right text-xs text-slate-700 tabular-nums">
                  {p.limits.seats === "unlimited" ? "∞" : p.limits.seats}
                </td>
                <td className="px-3 py-2.5 text-right text-xs text-slate-700 tabular-nums">
                  {p.limits.aiCredits === "unlimited" ? "∞" : p.limits.aiCredits.toLocaleString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
