import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { getSessionUser } from "@/lib/session";
import { getOrgOpenBalances, syncOverdueInvoices } from "@/lib/db";
import { Card } from "@/components/ui/card";

/**
 * /admin/billing — landing page with sub-section links and a
 * quick overview of orgs in arrears.
 *
 * Sub-pages:
 *   - /admin/billing/pricing   — platform + skill prices
 *   - /admin/billing/generate  — manual invoice generator (testing)
 *   - /admin/billing/invoices  — invoice list/detail
 *
 * The Phase 2 customer-side /billing landing page is added in
 * Phase 3.
 */
export default async function AdminBillingPage() {
  const user = await getSessionUser();
  if (!user) redirect("/login");
  if (!user.isPlatform) redirect("/dashboard");
  const t = await getTranslations("adminBilling");

  // Sweep open invoices past due → 'overdue' so the counters below
  // reflect reality without needing a cron.
  await syncOverdueInvoices().catch((e) =>
    console.error("syncOverdueInvoices failed:", e)
  );
  const balances = await getOrgOpenBalances().catch(() => []);
  const totalOpen = balances.reduce((acc, b) => acc + b.totalOpenChf, 0);
  const totalOverdue = balances.reduce((acc, b) => acc + b.overdueCount, 0);

  return (
    <main className="max-w-5xl mx-auto px-6 py-8">
      <div className="mb-8 animate-in">
        <h1 className="font-display text-2xl font-semibold accent-rule">
          {t("title")}
        </h1>
        <p className="text-sm text-text-secondary mt-3">{t("subtitle")}</p>
      </div>

      {/* Stats strip */}
      <div className="grid grid-cols-3 gap-4 mb-8 animate-in animate-in-delay-1">
        <Card>
          <div className="text-xs text-text-muted">{t("totalOpenBalance")}</div>
          <div className="text-2xl font-semibold mt-1">
            CHF {totalOpen.toFixed(2)}
          </div>
        </Card>
        <Card>
          <div className="text-xs text-text-muted">{t("orgsWithBalance")}</div>
          <div className="text-2xl font-semibold mt-1">{balances.length}</div>
        </Card>
        <Card>
          <div className="text-xs text-text-muted">{t("overdueInvoices")}</div>
          <div className="text-2xl font-semibold mt-1">
            {totalOverdue > 0 ? (
              <span className="text-error">{totalOverdue}</span>
            ) : (
              totalOverdue
            )}
          </div>
        </Card>
      </div>

      {/* Sub-tool cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8 animate-in animate-in-delay-2">
        <Link href="/admin/billing/pricing">
          <Card interactive>
            <div className="font-semibold mb-1">{t("pricingTitle")}</div>
            <div className="text-sm text-text-muted">{t("pricingDesc")}</div>
          </Card>
        </Link>
        <Link href="/admin/billing/generate">
          <Card interactive>
            <div className="font-semibold mb-1">{t("generateTitle")}</div>
            <div className="text-sm text-text-muted">{t("generateDesc")}</div>
          </Card>
        </Link>
        <Link href="/admin/billing/invoices">
          <Card interactive>
            <div className="font-semibold mb-1">{t("invoicesTitle")}</div>
            <div className="text-sm text-text-muted">{t("invoicesDesc")}</div>
          </Card>
        </Link>
        <Link href="/admin/billing/orgs">
          <Card interactive>
            <div className="font-semibold mb-1">{t("orgsTitle")}</div>
            <div className="text-sm text-text-muted">{t("orgsDesc")}</div>
          </Card>
        </Link>
      </div>

      {/* Orgs with open balance */}
      {balances.length > 0 && (
        <div className="animate-in animate-in-delay-3">
          <h2 className="text-lg font-semibold mb-3">{t("balancesTitle")}</h2>
          <Card>
            <table className="w-full text-sm">
              <thead className="text-xs text-text-muted text-left">
                <tr>
                  <th className="pb-2">{t("orgIdCol")}</th>
                  <th className="pb-2 text-right">{t("openCountCol")}</th>
                  <th className="pb-2 text-right">{t("overdueCountCol")}</th>
                  <th className="pb-2 text-right">{t("totalOpenCol")}</th>
                </tr>
              </thead>
              <tbody>
                {balances.map((b) => (
                  <tr key={b.zitadelOrgId} className="border-t border-border">
                    <td className="py-2 font-mono text-xs">{b.zitadelOrgId}</td>
                    <td className="py-2 text-right">{b.openCount}</td>
                    <td className="py-2 text-right">
                      {b.overdueCount > 0 ? (
                        <span className="text-error">{b.overdueCount}</span>
                      ) : (
                        <span className="text-text-muted">0</span>
                      )}
                    </td>
                    <td className="py-2 text-right">
                      CHF {b.totalOpenChf.toFixed(2)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>
      )}
    </main>
  );
}