"use client";

import { useEffect, useMemo, useState, type ReactNode } from "react";
import {
  AdminComparisonBarChart,
  AdminDonutChart,
  AdminHorizontalBarChart,
} from "@/components/admin/AdminDashboardCharts";
import {
  AdminAttentionList,
  AdminHealthRow,
  AdminPipeline,
  type AdminAttentionItem,
} from "@/components/admin/AdminDashboardWidgets";
import { AdminMetricSection } from "@/components/admin/AdminMetricSection";
import { AdminPageIntro } from "@/components/admin/AdminPageIntro";
import { AdminShell } from "@/components/admin/AdminShell";
import { AdminStatCard } from "@/components/admin/AdminStatCard";
import { AdminDashboardSkeleton } from "@/components/admin/AdminTableSkeleton";
import { Button } from "@/components/Button";
import { ErrorState } from "@/components/ui/ErrorState";
import { ApiError } from "@/lib/api";
import {
  failedTransfersAttentionHref,
  pendingApplicationsAttentionHref,
} from "@/lib/admin-attention";
import { adminListHref } from "@/lib/admin-list-query";
import { adminApi, formatAdminMoney } from "@/lib/api/admin";
import type { DashboardMetrics } from "@/types/admin";

const CAMPAIGN_COLORS = {
  active: "#059669",
  draft: "rgba(51, 65, 85, 0.4)",
  paused: "#D97706",
  completed: "var(--color-primary)",
  cancelled: "#DC2626",
} as const;

function MetricIcon({ d }: { d: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      width={18}
      height={18}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d={d} />
    </svg>
  );
}

const ICONS = {
  users: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z",
  campaigns:
    "M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5",
  volume:
    "M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z",
  earnings:
    "M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
  creators:
    "M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z",
  brands:
    "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 0h.008v.008h-.008V7.5Zm0 3h.008v.008h-.008V10.5Zm0 3h.008v.008h-.008V13.5Z",
  engagements:
    "M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244",
  payments:
    "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
} as const;

function icon(name: keyof typeof ICONS): ReactNode {
  return <MetricIcon d={ICONS[name]} />;
}

export function AdminDashboardPage() {
  return (
    <AdminShell title="Marketplace overview" subtitle="Live operations snapshot" contentWidth="full">
      {() => <DashboardContent />}
    </AdminShell>
  );
}

function DashboardContent() {
  const [metrics, setMetrics] = useState<DashboardMetrics | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [loadedAt, setLoadedAt] = useState<Date | null>(null);

  async function load(opts?: { soft?: boolean }) {
    const soft = opts?.soft === true;
    if (soft) {
      setRefreshing(true);
    } else {
      setLoading(true);
    }
    setError(null);
    try {
      setMetrics(await adminApi.dashboard());
      setLoadedAt(new Date());
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "Unable to load dashboard.");
      if (!soft) {
        setMetrics(null);
      }
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }

  useEffect(() => {
    void load();
  }, []);

  if (loading) {
    return <AdminDashboardSkeleton />;
  }

  if (error || !metrics) {
    return (
      <ErrorState title="Dashboard unavailable" message={error ?? "Try again."} onRetry={() => void load()} />
    );
  }

  return (
    <DashboardView
      metrics={metrics}
      loadedAt={loadedAt}
      refreshing={refreshing}
      onRefresh={() => void load({ soft: true })}
    />
  );
}

function DashboardView({
  metrics,
  loadedAt,
  refreshing,
  onRefresh,
}: {
  metrics: DashboardMetrics;
  loadedAt: Date | null;
  refreshing: boolean;
  onRefresh: () => void;
}) {
  const campaignStatusData = useMemo(
    () => [
      {
        key: "active",
        label: "Active",
        value: metrics.campaigns.active,
        color: CAMPAIGN_COLORS.active,
      },
      {
        key: "draft",
        label: "Draft",
        value: metrics.campaigns.draft,
        color: CAMPAIGN_COLORS.draft,
      },
      {
        key: "paused",
        label: "Paused",
        value: metrics.campaigns.paused,
        color: CAMPAIGN_COLORS.paused,
      },
      {
        key: "completed",
        label: "Completed",
        value: metrics.campaigns.completed,
        color: CAMPAIGN_COLORS.completed,
      },
      {
        key: "cancelled",
        label: "Cancelled",
        value: metrics.campaigns.cancelled,
        color: CAMPAIGN_COLORS.cancelled,
      },
    ],
    [metrics.campaigns],
  );

  const financeBars = useMemo(
    () => [
      {
        key: "volume",
        label: "Payment volume",
        value: metrics.finance.succeeded_volume,
        displayValue: formatAdminMoney(metrics.finance.succeeded_volume),
        color: "var(--color-primary)",
      },
      {
        key: "fees",
        label: "Platform fees",
        value: metrics.finance.platform_fees_collected,
        displayValue: formatAdminMoney(metrics.finance.platform_fees_collected),
        color: "var(--color-accent)",
      },
      {
        key: "earnings",
        label: "Creator earnings",
        value: metrics.finance.creator_earnings_total,
        displayValue: formatAdminMoney(metrics.finance.creator_earnings_total),
        color: "#059669",
      },
      {
        key: "payable",
        label: "Payable",
        value: metrics.finance.creator_earnings_payable,
        displayValue: formatAdminMoney(metrics.finance.creator_earnings_payable),
        color: "#D97706",
      },
      {
        key: "transferred",
        label: "Transferred",
        value: metrics.finance.creator_earnings_transferred,
        displayValue: formatAdminMoney(metrics.finance.creator_earnings_transferred),
        color: "rgba(23, 37, 84, 0.55)",
      },
    ],
    [metrics.finance],
  );

  const deliverableStatusData = useMemo(
    () => [
      {
        key: "pending",
        label: "Pending",
        value: metrics.deliverables.pending,
        color: "#F97316",
      },
      {
        key: "submitted",
        label: "Submitted",
        value: metrics.deliverables.submitted,
        color: "#0EA5E9",
      },
      {
        key: "revision",
        label: "Revision",
        value: metrics.deliverables.revision_requested,
        color: "#DC2626",
      },
      {
        key: "approved",
        label: "Approved",
        value: metrics.deliverables.approved,
        color: "#059669",
      },
    ],
    [metrics.deliverables],
  );

  const earningStatusData = useMemo(() => {
    const byStatus = metrics.finance.earnings_by_status ?? {};
    return [
      { key: "unfunded", label: "Unfunded", value: byStatus.unfunded ?? 0, color: "rgba(51, 65, 85, 0.35)" },
      { key: "funded", label: "Funded", value: byStatus.funded ?? 0, color: "var(--color-primary)" },
      { key: "in_progress", label: "In progress", value: byStatus.in_progress ?? 0, color: "#D97706" },
      { key: "payable", label: "Payable", value: byStatus.payable ?? 0, color: "#B45309" },
      { key: "transfer_pending", label: "Transfer pending", value: byStatus.transfer_pending ?? 0, color: "#7C3AED" },
      { key: "transferred", label: "Transferred", value: byStatus.transferred ?? 0, color: "#059669" },
    ];
  }, [metrics.finance.earnings_by_status]);

  const transferStatusData = useMemo(() => {
    const byStatus = metrics.finance.transfers_by_status ?? {};
    return [
      { key: "pending", label: "Pending", value: byStatus.pending ?? 0, color: "rgba(51, 65, 85, 0.35)" },
      { key: "processing", label: "Processing", value: byStatus.processing ?? 0, color: "#D97706" },
      { key: "succeeded", label: "Succeeded", value: byStatus.succeeded ?? 0, color: "#059669" },
      { key: "failed", label: "Failed", value: byStatus.failed ?? 0, color: "#DC2626" },
    ];
  }, [metrics.finance.transfers_by_status]);

  const failedTransferCount = metrics.finance.transfers_by_status?.failed ?? 0;

  const readyCount = metrics.stripe.readiness.ready ?? 0;
  const actionRequiredCount = metrics.stripe.readiness.action_required ?? 0;
  const setupRequiredCount = metrics.stripe.readiness.setup_required ?? 0;
  const connectedAccounts = metrics.stripe.connected_accounts;

  const hasMeaningfulFinance =
    metrics.finance.succeeded_volume > 0 ||
    metrics.finance.platform_fees_collected > 0 ||
    metrics.finance.creator_earnings_total > 0 ||
    metrics.finance.creator_earnings_payable > 0 ||
    metrics.finance.creator_earnings_transferred > 0;

  const stripeHealthItems = useMemo(() => {
    const items: Array<{
      key: string;
      label: string;
      tone: "success" | "warning" | "neutral" | "danger";
      detail?: string;
    }> = [];

    if (connectedAccounts === 0) {
      return items;
    }

    if (readyCount > 0) {
      items.push({
        key: "ready",
        label: "Ready for transfers",
        tone: "success",
        detail: `${readyCount} account${readyCount === 1 ? "" : "s"} meet Express readiness.`,
      });
    }

    items.push({
      key: "charges",
      label: "Charges enabled",
      tone: metrics.stripe.charges_enabled > 0 ? "success" : "neutral",
      detail: `${metrics.stripe.charges_enabled} of ${connectedAccounts} connected accounts`,
    });

    items.push({
      key: "payouts",
      label: "Payouts enabled",
      tone: metrics.stripe.payouts_enabled > 0 ? "success" : "neutral",
      detail: `${metrics.stripe.payouts_enabled} of ${connectedAccounts} — Connect capability, not transfer proof`,
    });

    if (actionRequiredCount > 0) {
      items.push({
        key: "action",
        label: "Action required",
        tone: "warning",
        detail: `${actionRequiredCount} account${actionRequiredCount === 1 ? "" : "s"} need attention in Stripe Connect.`,
      });
    }

    if (setupRequiredCount > 0) {
      items.push({
        key: "setup",
        label: "Setup required",
        tone: "warning",
        detail: `${setupRequiredCount} account${setupRequiredCount === 1 ? "" : "s"} still completing onboarding.`,
      });
    }

    return items;
  }, [
    actionRequiredCount,
    connectedAccounts,
    metrics.stripe.charges_enabled,
    metrics.stripe.payouts_enabled,
    readyCount,
    setupRequiredCount,
  ]);

  const attentionItems = useMemo(() => {
    const items: AdminAttentionItem[] = [];

    if (actionRequiredCount > 0) {
      items.push({
        key: "stripe-action",
        title: "Action-required Stripe accounts",
        detail: "Connected Express accounts need attention before transfers can proceed reliably.",
        count: actionRequiredCount,
        severity: "warning",
        href: adminListHref("/admin/finance/stripe", { readiness: "action_required" }),
      });
    }

    if (setupRequiredCount > 0) {
      items.push({
        key: "stripe-setup",
        title: "Setup-required Stripe accounts",
        detail: "Creators have started Connect onboarding but have not finished setup.",
        count: setupRequiredCount,
        severity: "routine",
        href: adminListHref("/admin/finance/stripe", { readiness: "setup_required" }),
      });
    }

    if (metrics.applications.pending > 0) {
      items.push({
        key: "pending-apps",
        title: "Pending applications",
        detail: "Applications awaiting brand review on campaigns with open pending status.",
        count: metrics.applications.pending,
        severity: "routine",
        href: pendingApplicationsAttentionHref(),
      });
    }

    if (metrics.deliverables.revision_requested > 0) {
      items.push({
        key: "revision-deliverables",
        title: "Deliverables needing revision",
        detail: "Deliverables marked revision requested and waiting on creator updates.",
        count: metrics.deliverables.revision_requested,
        severity: "routine",
        href: adminListHref("/admin/deliverables", { status: "revision_requested" }),
      });
    }

    if (metrics.finance.creator_earnings_payable > 0) {
      items.push({
        key: "payable",
        title: "Payable earnings",
        detail: `${formatAdminMoney(metrics.finance.creator_earnings_payable)} marked payable and awaiting Connect transfer.`,
        count: formatAdminMoney(metrics.finance.creator_earnings_payable),
        severity: "routine",
        href: adminListHref("/admin/finance/earnings", { status: "payable" }),
      });
    }

    if (metrics.finance.payments_failed > 0) {
      items.push({
        key: "failed-payments",
        title: "Failed payments",
        detail: "PaymentIntents reported as failed — review charge status and brand payment methods.",
        count: metrics.finance.payments_failed,
        severity: "critical",
        href: adminListHref("/admin/finance/payments", { status: "failed" }),
      });
    }

    if (failedTransferCount > 0) {
      items.push({
        key: "failed-transfers",
        title: "Failed Connect transfers",
        detail: "Transfer attempts failed. Open earnings filtered to transfer status failed.",
        count: failedTransferCount,
        severity: "critical",
        href: failedTransfersAttentionHref(),
      });
    }

    return items;
  }, [actionRequiredCount, failedTransferCount, metrics, setupRequiredCount]);

  const lastUpdatedLabel = loadedAt
    ? `Updated ${loadedAt.toLocaleTimeString("en-US", {
        hour: "numeric",
        minute: "2-digit",
      })}`
    : null;

  const updatedMeta = lastUpdatedLabel ? (
    <div className="inline-flex items-center gap-1.5 text-[0.8125rem] tabular-nums text-ink-40">
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        aria-hidden="true"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
        />
      </svg>
      <span>{lastUpdatedLabel}</span>
    </div>
  ) : null;

  return (
    <div className="w-full min-w-0 space-y-6">
      <AdminPageIntro
        description="Live marketplace operations and finance snapshot. Creator payouts use Stripe Connect — figures below are not a platform wallet balance."
        meta={updatedMeta}
        actions={
          <Button
            type="button"
            variant="secondary"
            size="sm"
            onClick={onRefresh}
            disabled={refreshing}
          >
            {refreshing ? "Refreshing…" : "Refresh"}
          </Button>
        }
      />

      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <AdminStatCard
          label="Total users"
          value={metrics.users.total}
          size="primary"
          tone="blue"
          icon={icon("users")}
          href="/admin/users"
        />
        <AdminStatCard
          label="Active campaigns"
          value={metrics.campaigns.active}
          size="primary"
          tone="green"
          icon={icon("campaigns")}
          href={adminListHref("/admin/campaigns", { status: "active" })}
        />
        <AdminStatCard
          label="Succeeded payment volume"
          value={formatAdminMoney(metrics.finance.succeeded_volume)}
          size="primary"
          emphasis="finance"
          tone="purple"
          icon={icon("volume")}
          href={adminListHref("/admin/finance/payments", { status: "succeeded" })}
        />
        <AdminStatCard
          label="Creator earnings (all statuses)"
          value={formatAdminMoney(metrics.finance.creator_earnings_total)}
          size="primary"
          emphasis="finance"
          tone="orange"
          icon={icon("earnings")}
          href="/admin/finance/earnings"
        />
        <AdminStatCard
          label="Creators"
          value={metrics.users.creators}
          size="secondary"
          tone="rose"
          icon={icon("creators")}
          href={adminListHref("/admin/users", { account_type: "creator" })}
        />
        <AdminStatCard
          label="Brands"
          value={metrics.users.brands}
          size="secondary"
          tone="purple"
          icon={icon("brands")}
          href={adminListHref("/admin/users", { account_type: "brand" })}
        />
        <AdminStatCard
          label="Active engagements"
          value={metrics.engagements.active}
          size="secondary"
          tone="green"
          icon={icon("engagements")}
          href="/admin/campaigns"
        />
        <AdminStatCard
          label="Succeeded payments"
          value={metrics.finance.payments_succeeded}
          size="secondary"
          tone="blue"
          icon={icon("payments")}
          href={adminListHref("/admin/finance/payments", { status: "succeeded" })}
        />
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2 xl:items-start">
        <AdminMetricSection title="Marketplace health" inset>
          <AdminDonutChart
            data={campaignStatusData}
            centerLabel="Campaigns"
            centerValue={metrics.campaigns.total}
            ariaLabel="Campaign status distribution"
          />
        </AdminMetricSection>

        <AdminMetricSection
          title="Applications & engagements"
          description="Separate aggregates — not one sequential funnel."
          inset
        >
          <AdminPipeline
            steps={[
              {
                key: "pending",
                label: "Pending applications",
                value: metrics.applications.pending,
                href: pendingApplicationsAttentionHref(),
                tone: "orange",
                icon: icon("campaigns"),
              },
              {
                key: "accepted",
                label: "Accepted applications",
                value: metrics.applications.accepted,
                // No campaigns list filter for accepted applications exists today.
                href: "/admin/campaigns",
                tone: "green",
                icon: icon("payments"),
              },
              {
                key: "active",
                label: "Active engagements",
                value: metrics.engagements.active,
                href: "/admin/campaigns",
                tone: "blue",
                icon: icon("engagements"),
              },
              {
                key: "approved",
                label: "Approved deliverables",
                value: metrics.deliverables.approved,
                href: adminListHref("/admin/deliverables", { status: "approved" }),
                tone: "purple",
                icon: icon("payments"),
              },
            ]}
          />
          <div className="mt-4 border-t border-line pt-4">
            <AdminHorizontalBarChart
              data={deliverableStatusData}
              title="Deliverable status"
              ariaLabel="Deliverable status breakdown"
              emptyMessage="No deliverables recorded yet."
            />
          </div>
        </AdminMetricSection>
      </div>

      <AdminMetricSection
        title="Financial overview"
        description="Succeeded charges, platform fees, and earning/transfer accounting — snapshot totals only, not historical trends."
      >
        <div className="min-w-0 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
          <p className="mb-3 text-[0.8125rem] font-semibold text-primary">Aggregate comparison</p>
          <AdminComparisonBarChart
            data={financeBars}
            ariaLabel="Finance totals comparison chart"
            emptyTitle="No successful payments yet"
            emptyDescription="Charts populate as succeeded charges and earnings are recorded. Top KPI totals for volume and earnings stay available above."
          />
          <ul className="mt-4 grid grid-cols-1 gap-x-6 gap-y-2 border-t border-line pt-3 sm:grid-cols-2 xl:grid-cols-3">
            <li className="text-[0.75rem] leading-snug text-ink-60">
              <span className="font-medium text-primary">Payment volume</span>
              {" — "}succeeded PaymentIntent totals
            </li>
            <li className="text-[0.75rem] leading-snug text-ink-60">
              <span className="font-medium text-primary">Platform fees</span>
              {" — "}fees from succeeded charges only
            </li>
            <li className="text-[0.75rem] leading-snug text-ink-60">
              <span className="font-medium text-primary">Creator earnings</span>
              {" — "}all statuses; not a wallet
            </li>
            <li className="text-[0.75rem] leading-snug text-ink-60">
              <span className="font-medium text-primary">Payable</span>
              {" — "}status payable (excludes transfer_pending)
            </li>
            <li className="text-[0.75rem] leading-snug text-ink-60">
              <span className="font-medium text-primary">Transferred</span>
              {" — "}Connect accounting status transferred
            </li>
          </ul>
          {hasMeaningfulFinance ? (
            <p className="mt-3 text-[0.75rem] leading-snug text-ink-40">
              Snapshot totals from the dashboard API — not a daily or weekly trend.
            </p>
          ) : null}
        </div>

        {(earningStatusData.some((item) => item.value > 0) ||
          transferStatusData.some((item) => item.value > 0)) && (
          <div className="mt-3 grid grid-cols-1 gap-3 xl:grid-cols-2">
            {earningStatusData.some((item) => item.value > 0) ? (
              <div className="min-w-0 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
                <AdminHorizontalBarChart
                  data={earningStatusData}
                  title="Earnings by status"
                  ariaLabel="Creator earnings status counts"
                />
              </div>
            ) : null}
            {transferStatusData.some((item) => item.value > 0) ? (
              <div className="min-w-0 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
                <AdminHorizontalBarChart
                  data={transferStatusData}
                  title="Connect transfers by status"
                  ariaLabel="Creator transfer status counts"
                />
                <p className="mt-3 text-[0.75rem] leading-snug text-ink-40">
                  Transfer counts are Connect Transfer attempts — distinct from earning status and
                  from Express &quot;payouts enabled&quot;.
                </p>
              </div>
            ) : null}
          </div>
        )}
      </AdminMetricSection>

      <AdminMetricSection
        title="Stripe Connect health"
        description="Creator Express readiness. “Payouts enabled” is the Connect capability flag — not proof money was transferred."
      >
        <div className="grid grid-cols-1 gap-3 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
          <div className="min-w-0 grid grid-cols-1 gap-3 sm:grid-cols-3">
            <AdminStatCard
              label="Connected accounts"
              value={connectedAccounts}
              size="primary"
              tone="navy"
              icon={icon("engagements")}
              href="/admin/finance/stripe"
            />
            <AdminStatCard
              label="Charges enabled"
              value={metrics.stripe.charges_enabled}
              size="secondary"
              tone="green"
              icon={icon("payments")}
              href="/admin/finance/stripe"
            />
            <AdminStatCard
              label="Payouts enabled"
              value={metrics.stripe.payouts_enabled}
              size="secondary"
              tone="blue"
              hint="Capability flag only"
              icon={icon("volume")}
              href="/admin/finance/stripe"
            />
            <AdminStatCard
              label="Ready"
              value={readyCount}
              size="secondary"
              tone="green"
              icon={icon("payments")}
              href={adminListHref("/admin/finance/stripe", { readiness: "ready" })}
            />
            <AdminStatCard
              label="Action required"
              value={actionRequiredCount}
              size="secondary"
              tone="orange"
              icon={icon("campaigns")}
              href={adminListHref("/admin/finance/stripe", { readiness: "action_required" })}
            />
            <AdminStatCard
              label="Setup required"
              value={setupRequiredCount}
              size="secondary"
              tone="purple"
              icon={icon("users")}
              href={adminListHref("/admin/finance/stripe", { readiness: "setup_required" })}
            />
          </div>
          <div className="min-w-0 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
            <p className="mb-1 text-[0.8125rem] font-semibold text-primary">Capability summary</p>
            <p className="mb-3 text-[0.8125rem] text-ink-60">
              <span className="font-semibold tabular-nums text-primary">{connectedAccounts}</span>
              {` connected Express account${connectedAccounts === 1 ? "" : "s"}`}
            </p>
            <AdminHealthRow items={stripeHealthItems} />
          </div>
        </div>
      </AdminMetricSection>

      <AdminMetricSection
        title="Attention required"
        description="Operational and financial items derived from current metrics only."
      >
        <AdminAttentionList items={attentionItems} />
      </AdminMetricSection>
    </div>
  );
}