import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { getSessionUser } from "@/lib/session";
import { listInvoices, syncOverdueInvoices } from "@/lib/db";
import { CustomerInvoiceList } from "@/components/billing/customer-invoice-list";
import { RunningTotalWidget } from "@/components/billing/running-total-widget";

/**
 * /billing — customer's billing home.
 *
 * Shows two things:
 *   1. RunningTotalWidget — current calendar month's accruing cost
 *      (or the already-issued invoice for the current month, if
 *      that ran early).
 *   2. CustomerInvoiceList — every issued invoice for this org,
 *      newest first. Status is reflected with a colored badge.
 *
 * Anyone signed in can view this. The data is org-scoped; even
 * non-owner team members see the same view. Phase 4 will add a
 * "settings.payByInvoice" toggle visibility-gated to owners only.
 */
export default async function CustomerBillingPage() {
  const user = await getSessionUser();
  if (!user) redirect("/login");
  const t = await getTranslations("customerBilling");

  // Sync overdue status before listing — cheap, idempotent.
  try {
    await syncOverdueInvoices();
  } catch (e) {
    console.warn("syncOverdueInvoices failed in /billing:", e);
  }

  const invoices = await listInvoices({
    zitadelOrgId: user.orgId,
    limit: 200,
  });

  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>

      <section className="mb-8 animate-in animate-in-delay-1">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
          {t("currentPeriodHeading")}
        </h2>
        {/* Phase 6: pass the owner flag so the no-config CTA shows
            the right call-to-action vs the right hint. */}
        <RunningTotalWidget isOwner={user.roles.includes("owner")} />
      </section>

      <section className="animate-in animate-in-delay-2">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
          {t("historyHeading")}
        </h2>
        <CustomerInvoiceList invoices={invoices} />
      </section>
    </main>
  );
}