import { Badge } from "@/components/ui/badge";
import { Card, CardBody, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { DonutChart } from "@/components/ui/charts/donut-chart";
import { BarChart } from "@/components/ui/charts/bar-chart";
import { LineChart } from "@/components/ui/charts/line-chart";
import {
  getBillingSummary,
  getStatusBreakdown,
  getPlanBreakdown,
  getMonthlyEvolution,
  getExpiringTrials,
  getPastDueTenants,
} from "@/lib/db/queries/billing";
import {
  mrrCumulativeMonthly,
  churnRateMonthly,
  tenantsTotalCumulativeMonthly,
  trialConversionRateMonthly,
} from "@/lib/db/queries/charts";
import { logActivity } from "@/lib/db/audit";
import { getSession } from "@/lib/auth/session";

export const dynamic = "force-dynamic";

const numFmt = new Intl.NumberFormat("fr-FR");
const priceFmt = new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
});
const dateFmt = new Intl.DateTimeFormat("fr-FR", {
  day: "2-digit",
  month: "short",
  year: "numeric",
});
const monthFmt = new Intl.DateTimeFormat("fr-FR", {
  month: "short",
  year: "2-digit",
});

function shortMonth(yyyyMm: string): string {
  return monthFmt.format(new Date(`${yyyyMm}-01T00:00:00`));
}

export default async function BillingPage() {
  const session = await getSession();
  let summary: Awaited<ReturnType<typeof getBillingSummary>> | null = null;
  let statusBd: Awaited<ReturnType<typeof getStatusBreakdown>> | null = null;
  let planBd: Awaited<ReturnType<typeof getPlanBreakdown>> = [];
  let monthly: Awaited<ReturnType<typeof getMonthlyEvolution>> = [];
  let expiringTrials: Awaited<ReturnType<typeof getExpiringTrials>> = [];
  let pastDue: Awaited<ReturnType<typeof getPastDueTenants>> = [];
  let mrrSeries: Awaited<ReturnType<typeof mrrCumulativeMonthly>> = [];
  let churnSeries: Awaited<ReturnType<typeof churnRateMonthly>> = [];
  let tenantsCum: Awaited<ReturnType<typeof tenantsTotalCumulativeMonthly>> = [];
  let conversionSeries: Awaited<ReturnType<typeof trialConversionRateMonthly>> = [];
  let loadError: string | null = null;
  try {
    [
      summary,
      statusBd,
      planBd,
      monthly,
      expiringTrials,
      pastDue,
      mrrSeries,
      churnSeries,
      tenantsCum,
      conversionSeries,
    ] = await Promise.all([
      getBillingSummary(),
      getStatusBreakdown(),
      getPlanBreakdown(),
      getMonthlyEvolution(),
      getExpiringTrials(),
      getPastDueTenants(),
      mrrCumulativeMonthly(),
      churnRateMonthly(),
      tenantsTotalCumulativeMonthly(),
      trialConversionRateMonthly(),
    ]);
    void logActivity({
      type: "superadmin.billing_view",
      title: "Vue suivi paiements / abonnements",
      user_id: session?.user.id,
    });
  } catch (err) {
    loadError = err instanceof Error ? err.message : "Erreur inconnue";
  }

  return (
    <div className="px-6 py-6 lg:px-10">
      <header className="mb-6">
        <h1 className="text-2xl font-semibold">Abonnements & paiements</h1>
        <p className="text-sm text-muted-foreground">
          Suivi du chiffre d&apos;affaires récurrent, des conversions trial → payant
          et des paiements en échec.
        </p>
      </header>

      {loadError && (
        <div className="rounded-md border border-red-200 bg-danger-subtle px-4 py-3 text-sm text-danger">
          Impossible de charger les statistiques : {loadError}
        </div>
      )}

      {!loadError && summary && statusBd && (
        <>
          {/* KPIs principaux */}
          <section className="mb-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <KpiTile
              label="MRR"
              value={priceFmt.format(Number(summary.mrr_eur))}
              hint="Revenu récurrent mensuel (subs actives)"
              tone="success"
            />
            <KpiTile
              label="ARR"
              value={priceFmt.format(Number(summary.arr_eur))}
              hint="Annual Recurring Revenue"
              tone="success"
            />
            <KpiTile
              label="Inscriptions (30 j)"
              value={numFmt.format(summary.signups_30j)}
              hint={`${summary.total_tenants} tenants au total`}
              tone="accent"
            />
            <KpiTile
              label="Paiements en échec"
              value={numFmt.format(summary.past_due)}
              hint={
                summary.past_due > 0
                  ? "À traiter en priorité"
                  : "Aucun past-due"
              }
              tone={summary.past_due > 0 ? "danger" : "success"}
            />
          </section>

          {/* Donuts B1 + B4 */}
          <section className="mb-6 grid gap-4 lg:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Répartition par statut</CardTitle>
                <CardDescription>
                  Trial, actifs, paiements en échec, annulés.
                </CardDescription>
              </CardHeader>
              <CardBody>
                <DonutChart
                  segments={[
                    {
                      label: "En essai",
                      value: statusBd.trialing,
                      color: "var(--warning)",
                    },
                    {
                      label: "Actifs payants",
                      value: statusBd.active,
                      color: "var(--success)",
                    },
                    {
                      label: "Paiement en échec",
                      value: statusBd.past_due,
                      color: "var(--danger)",
                    },
                    {
                      label: "Annulés",
                      value: statusBd.canceled,
                      color: "var(--muted-foreground)",
                    },
                  ]}
                  centerValue={numFmt.format(
                    statusBd.trialing +
                      statusBd.active +
                      statusBd.past_due +
                      statusBd.canceled,
                  )}
                  centerLabel="Subs"
                />
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Contribution MRR par plan</CardTitle>
                <CardDescription>
                  Part de chaque plan dans le revenu mensuel récurrent.
                </CardDescription>
              </CardHeader>
              <CardBody>
                <DonutChart
                  segments={planBd
                    .filter((p) => Number(p.mrr_contribution) > 0)
                    .map((p) => ({
                      label: p.plan_name,
                      value: Number(p.mrr_contribution),
                    }))}
                  centerValue={priceFmt.format(Number(summary.mrr_eur))}
                  centerLabel="MRR"
                />
              </CardBody>
            </Card>
          </section>

          {/* Détail par plan (tableau) */}
          <section className="mb-6">
            <h2 className="mb-2 text-sm font-medium uppercase tracking-wider text-muted-foreground">
              Détail par plan
            </h2>
            <div className="overflow-hidden rounded-lg border border-border bg-surface">
              <table className="w-full text-sm">
                <thead className="bg-surface-2 text-left text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
                  <tr>
                    <th className="px-4 py-2.5">Plan</th>
                    <th className="px-4 py-2.5 text-right">Tarif mens.</th>
                    <th className="px-4 py-2.5 text-right">Tarif annuel</th>
                    <th className="px-4 py-2.5 text-right">Abonnés actifs</th>
                    <th className="px-4 py-2.5 text-right">Mensuel / Annuel</th>
                    <th className="px-4 py-2.5 text-right">MRR</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {planBd.map((p) => (
                    <tr key={p.plan_id}>
                      <td className="px-4 py-2.5">
                        <div className="font-medium">{p.plan_name}</div>
                        <div className="font-mono text-[10px] uppercase text-muted-foreground">
                          {p.plan_code}
                        </div>
                      </td>
                      <td className="px-4 py-2.5 text-right text-xs tabular-nums">
                        {priceFmt.format(Number(p.monthly_price))}
                      </td>
                      <td className="px-4 py-2.5 text-right text-xs tabular-nums">
                        {priceFmt.format(Number(p.yearly_price))}
                      </td>
                      <td className="px-4 py-2.5 text-right tabular-nums">
                        {numFmt.format(p.active_count)}
                      </td>
                      <td className="px-4 py-2.5 text-right text-xs tabular-nums">
                        {p.monthly_count} / {p.yearly_count}
                      </td>
                      <td className="px-4 py-2.5 text-right font-semibold text-success tabular-nums">
                        {priceFmt.format(Number(p.mrr_contribution))}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          {/* B2 + B3 : bar abonnés/plan + bar empilé mensuel/annuel */}
          {planBd.some((p) => p.active_count > 0) && (
            <section className="mb-6 grid gap-4 lg:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Abonnés actifs par plan</CardTitle>
                </CardHeader>
                <CardBody>
                  <BarChart
                    orientation="horizontal"
                    data={planBd.map((p) => ({
                      label: p.plan_name,
                      values: [p.active_count],
                    }))}
                    series={[{ name: "Abonnés" }]}
                    showValues
                    legend={false}
                    formatValue={(v) => numFmt.format(v)}
                  />
                </CardBody>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Mensuel vs annuel par plan</CardTitle>
                </CardHeader>
                <CardBody>
                  <BarChart
                    orientation="horizontal"
                    mode="stacked"
                    data={planBd.map((p) => ({
                      label: p.plan_name,
                      values: [p.monthly_count, p.yearly_count],
                    }))}
                    series={[
                      { name: "Mensuel", color: "var(--accent)" },
                      { name: "Annuel", color: "var(--success)" },
                    ]}
                    showValues
                    formatValue={(v) => numFmt.format(v)}
                  />
                </CardBody>
              </Card>
            </section>
          )}

          {/* Évolution mensuelle T3/T5/B6 : bar groupé */}
          {monthly.length > 0 && (
            <section className="mb-6">
              <Card>
                <CardHeader>
                  <CardTitle>Évolution sur 12 mois</CardTitle>
                  <CardDescription>
                    Inscriptions, conversions trial → payant, annulations par mois.
                  </CardDescription>
                </CardHeader>
                <CardBody>
                  <BarChart
                    mode="grouped"
                    height={220}
                    data={monthly.map((m) => ({
                      label: shortMonth(m.month),
                      values: [m.signups, m.conversions_to_paid, m.cancellations],
                    }))}
                    series={[
                      { name: "Inscriptions", color: "var(--accent)" },
                      { name: "Conversions", color: "var(--success)" },
                      { name: "Annulations", color: "var(--danger)" },
                    ]}
                    formatValue={(v) => numFmt.format(v)}
                  />
                </CardBody>
              </Card>
            </section>
          )}

          {/* B5 + T4 : MRR cumulé + tenants cumulés */}
          <section className="mb-6 grid gap-4 lg:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>MRR cumulé sur 12 mois</CardTitle>
                <CardDescription>
                  Revenu récurrent mensuel en fin de mois.
                </CardDescription>
              </CardHeader>
              <CardBody>
                <LineChart
                  xLabels={mrrSeries.map((r) => shortMonth(r.month))}
                  series={[
                    {
                      name: "MRR",
                      values: mrrSeries.map((r) => Number(r.mrr_eur)),
                      color: "var(--success)",
                    },
                  ]}
                  formatValue={(v) => priceFmt.format(v)}
                  fillFirst
                  legend={false}
                />
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Tenants cumulés sur 12 mois</CardTitle>
                <CardDescription>
                  Total tenants enregistrés en fin de mois.
                </CardDescription>
              </CardHeader>
              <CardBody>
                <LineChart
                  xLabels={tenantsCum.map((r) => shortMonth(r.month))}
                  series={[
                    {
                      name: "Tenants",
                      values: tenantsCum.map((r) => r.count),
                      color: "var(--accent)",
                    },
                  ]}
                  formatValue={(v) => numFmt.format(v)}
                  fillFirst
                  legend={false}
                />
              </CardBody>
            </Card>
          </section>

          {/* B7 + T6 : churn + conversion */}
          <section className="mb-6 grid gap-4 lg:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Taux d&apos;annulation mensuel</CardTitle>
                <CardDescription>
                  Churn rate = annulés du mois / actifs au début du mois.
                </CardDescription>
              </CardHeader>
              <CardBody>
                <LineChart
                  xLabels={churnSeries.map((r) => shortMonth(r.month))}
                  series={[
                    {
                      name: "Churn (%)",
                      values: churnSeries.map((r) => Number(r.rate_pct)),
                      color: "var(--danger)",
                    },
                  ]}
                  formatValue={(v) => `${v.toFixed(1)}%`}
                  legend={false}
                />
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Taux de conversion trial → payant</CardTitle>
                <CardDescription>
                  Conversions / inscriptions par mois.
                </CardDescription>
              </CardHeader>
              <CardBody>
                <LineChart
                  xLabels={conversionSeries.map((r) => shortMonth(r.month))}
                  series={[
                    {
                      name: "Conversion (%)",
                      values: conversionSeries.map((r) => Number(r.rate_pct)),
                      color: "var(--success)",
                    },
                  ]}
                  formatValue={(v) => `${v.toFixed(1)}%`}
                  legend={false}
                />
              </CardBody>
            </Card>
          </section>

          {/* Trials qui se terminent + paiements en échec */}
          <section className="grid gap-4 lg:grid-cols-2">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <CardTitle>Essais qui se terminent</CardTitle>
                    <CardDescription>
                      14 prochains jours — relancer pour la conversion.
                    </CardDescription>
                  </div>
                  <Badge tone="warning">{expiringTrials.length}</Badge>
                </div>
              </CardHeader>
              <CardBody>
                {expiringTrials.length === 0 ? (
                  <p className="text-sm text-muted-foreground">
                    Aucun essai en passe d&apos;expirer.
                  </p>
                ) : (
                  <ul className="divide-y divide-border">
                    {expiringTrials.map((t) => (
                      <li
                        key={t.tenant_id}
                        className="flex items-center gap-3 py-2 text-sm"
                      >
                        <div className="min-w-0 flex-1">
                          <div className="font-medium truncate">
                            {t.tenant_name}
                          </div>
                          <div className="font-mono text-[10px] text-muted-foreground">
                            {t.tenant_slug} · {t.plan_name ?? "—"}
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="text-xs tabular-nums">
                            {dateFmt.format(new Date(t.trial_end))}
                          </div>
                          <Badge
                            tone={t.days_left <= 3 ? "danger" : "warning"}
                          >
                            {t.days_left >= 0
                              ? `${t.days_left} j`
                              : `expiré (${-t.days_left} j)`}
                          </Badge>
                        </div>
                      </li>
                    ))}
                  </ul>
                )}
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <CardTitle>Paiements en échec</CardTitle>
                    <CardDescription>
                      Subscriptions past_due — à recouvrer ou suspendre.
                    </CardDescription>
                  </div>
                  <Badge tone={pastDue.length > 0 ? "danger" : "success"}>
                    {pastDue.length}
                  </Badge>
                </div>
              </CardHeader>
              <CardBody>
                {pastDue.length === 0 ? (
                  <p className="text-sm text-success">
                    ✓ Tous les prélèvements sont à jour.
                  </p>
                ) : (
                  <ul className="divide-y divide-border">
                    {pastDue.map((t) => (
                      <li
                        key={t.tenant_id}
                        className="flex items-center gap-3 py-2 text-sm"
                      >
                        <div className="min-w-0 flex-1">
                          <div className="font-medium truncate">
                            {t.tenant_name}
                          </div>
                          <div className="font-mono text-[10px] text-muted-foreground">
                            {t.tenant_slug} · {t.plan_name ?? "—"}
                          </div>
                        </div>
                        <div className="text-right">
                          {t.monthly_price && (
                            <div className="text-xs text-danger font-medium tabular-nums">
                              {priceFmt.format(Number(t.monthly_price))} dû
                            </div>
                          )}
                          {t.current_period_end && (
                            <div className="text-[10px] text-muted-foreground tabular-nums">
                              période fin{" "}
                              {dateFmt.format(new Date(t.current_period_end))}
                            </div>
                          )}
                        </div>
                      </li>
                    ))}
                  </ul>
                )}
              </CardBody>
            </Card>
          </section>
        </>
      )}
    </div>
  );
}

function KpiTile({
  label,
  value,
  hint,
  tone = "neutral",
}: {
  label: string;
  value: string;
  hint?: string;
  tone?: "neutral" | "accent" | "success" | "warning" | "danger";
}) {
  const toneCls = {
    neutral: "text-foreground",
    accent: "text-accent",
    success: "text-success",
    warning: "text-warning",
    danger: "text-danger",
  }[tone];
  return (
    <div className="rounded-lg border border-border bg-surface p-4">
      <p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
        {label}
      </p>
      <p className={`mt-1 text-2xl font-semibold tabular-nums ${toneCls}`}>
        {value}
      </p>
      {hint && (
        <p className="mt-1 text-[11px] text-muted-foreground">{hint}</p>
      )}
    </div>
  );
}