import { permissions } from "@mrp/shared";
import type { DemandPlanningRollupDto } from "@mrp/shared/dist/sales/types.js";
import { useEffect, useState } from "react";
import type { ReactNode } from "react";

import { useAuth } from "../../auth/AuthProvider";
import { ApiError, api } from "../../lib/api";

interface DashboardSnapshot {
  customers: Awaited<ReturnType<typeof api.getCustomers>> | null;
  vendors: Awaited<ReturnType<typeof api.getVendors>> | null;
  items: Awaited<ReturnType<typeof api.getInventoryItems>> | null;
  warehouses: Awaited<ReturnType<typeof api.getWarehouses>> | null;
  purchaseOrders: Awaited<ReturnType<typeof api.getPurchaseOrders>> | null;
  workOrders: Awaited<ReturnType<typeof api.getWorkOrders>> | null;
  quotes: Awaited<ReturnType<typeof api.getQuotes>> | null;
  orders: Awaited<ReturnType<typeof api.getSalesOrders>> | null;
  shipments: Awaited<ReturnType<typeof api.getShipments>> | null;
  projects: Awaited<ReturnType<typeof api.getProjects>> | null;
  planningRollup: DemandPlanningRollupDto | null;
  refreshedAt: string;
}

function hasPermission(userPermissions: string[] | undefined, permission: string) {
  return Boolean(userPermissions?.includes(permission));
}

function formatCurrency(value: number) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
  }).format(value);
}

function sumNumber(values: number[]) {
  return values.reduce((total, value) => total + value, 0);
}

function formatPercent(value: number, total: number) {
  if (total <= 0) {
    return "0%";
  }

  return `${Math.round((value / total) * 100)}%`;
}

function ProgressBar({
  value,
  total,
  tone,
}: {
  value: number;
  total: number;
  tone: string;
}) {
  const width = total > 0 ? Math.max(6, Math.round((value / total) * 100)) : 0;

  return (
    <div className="h-2 overflow-hidden rounded-full bg-page/80">
      <div className={`h-full rounded-full ${tone}`} style={{ width: `${Math.min(width, 100)}%` }} />
    </div>
  );
}

function StackedBar({
  segments,
}: {
  segments: Array<{ value: number; tone: string }>;
}) {
  const total = segments.reduce((sum, segment) => sum + segment.value, 0);

  return (
    <div className="flex h-3 overflow-hidden rounded-full bg-page/80">
      {segments.map((segment, index) => {
        const width = total > 0 ? (segment.value / total) * 100 : 0;
        return <div key={`${segment.tone}-${index}`} className={segment.tone} style={{ width: `${width}%` }} />;
      })}
    </div>
  );
}

function DashboardCard({
  eyebrow,
  title,
  children,
  className = "",
}: {
  eyebrow: string;
  title: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <article className={`rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5 ${className}`.trim()}>
      <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">{eyebrow}</p>
      <h3 className="mt-2 text-lg font-bold text-text">{title}</h3>
      {children}
    </article>
  );
}

export function DashboardPage() {
  const { token, user } = useAuth();
  const [snapshot, setSnapshot] = useState<DashboardSnapshot | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!token || !user) {
      setSnapshot(null);
      setIsLoading(false);
      return;
    }

    const authToken = token;
    let isMounted = true;
    setIsLoading(true);
    setError(null);

    const canReadCrm = hasPermission(user.permissions, permissions.crmRead);
    const canReadInventory = hasPermission(user.permissions, permissions.inventoryRead);
    const canReadPurchasing = hasPermission(user.permissions, permissions.purchasingRead);
    const canReadManufacturing = hasPermission(user.permissions, permissions.manufacturingRead);
    const canReadSales = hasPermission(user.permissions, permissions.salesRead);
    const canReadShipping = hasPermission(user.permissions, permissions.shippingRead);
    const canReadProjects = hasPermission(user.permissions, permissions.projectsRead);

    async function loadSnapshot() {
      const results = await Promise.allSettled([
        canReadCrm ? api.getCustomers(authToken) : Promise.resolve(null),
        canReadCrm ? api.getVendors(authToken) : Promise.resolve(null),
        canReadInventory ? api.getInventoryItems(authToken) : Promise.resolve(null),
        canReadInventory ? api.getWarehouses(authToken) : Promise.resolve(null),
        canReadPurchasing ? api.getPurchaseOrders(authToken) : Promise.resolve(null),
        canReadManufacturing ? api.getWorkOrders(authToken) : Promise.resolve(null),
        canReadSales ? api.getQuotes(authToken) : Promise.resolve(null),
        canReadSales ? api.getSalesOrders(authToken) : Promise.resolve(null),
        canReadShipping ? api.getShipments(authToken) : Promise.resolve(null),
        canReadProjects ? api.getProjects(authToken) : Promise.resolve(null),
        canReadSales ? api.getDemandPlanningRollup(authToken) : Promise.resolve(null),
      ]);

      if (!isMounted) {
        return;
      }

      const firstRejected = results.find((result) => result.status === "rejected");
      if (firstRejected?.status === "rejected") {
        const reason = firstRejected.reason;
        setError(reason instanceof ApiError ? reason.message : "Unable to load dashboard data.");
      }

      setSnapshot({
        customers: results[0].status === "fulfilled" ? results[0].value : null,
        vendors: results[1].status === "fulfilled" ? results[1].value : null,
        items: results[2].status === "fulfilled" ? results[2].value : null,
        warehouses: results[3].status === "fulfilled" ? results[3].value : null,
        purchaseOrders: results[4].status === "fulfilled" ? results[4].value : null,
        workOrders: results[5].status === "fulfilled" ? results[5].value : null,
        quotes: results[6].status === "fulfilled" ? results[6].value : null,
        orders: results[7].status === "fulfilled" ? results[7].value : null,
        shipments: results[8].status === "fulfilled" ? results[8].value : null,
        projects: results[9].status === "fulfilled" ? results[9].value : null,
        planningRollup: results[10].status === "fulfilled" ? results[10].value : null,
        refreshedAt: new Date().toISOString(),
      });
      setIsLoading(false);
    }

    loadSnapshot().catch((loadError) => {
      if (!isMounted) {
        return;
      }

      setError(loadError instanceof ApiError ? loadError.message : "Unable to load dashboard data.");
      setSnapshot(null);
      setIsLoading(false);
    });

    return () => {
      isMounted = false;
    };
  }, [token, user]);

  const customers = snapshot?.customers ?? [];
  const vendors = snapshot?.vendors ?? [];
  const items = snapshot?.items ?? [];
  const warehouses = snapshot?.warehouses ?? [];
  const purchaseOrders = snapshot?.purchaseOrders ?? [];
  const workOrders = snapshot?.workOrders ?? [];
  const quotes = snapshot?.quotes ?? [];
  const orders = snapshot?.orders ?? [];
  const shipments = snapshot?.shipments ?? [];
  const projects = snapshot?.projects ?? [];
  const planningRollup = snapshot?.planningRollup;

  const customerCount = customers.length;
  const activeCustomerCount = customers.filter((customer) => customer.lifecycleStage === "ACTIVE").length;
  const resellerCount = customers.filter((customer) => customer.isReseller).length;
  const strategicCustomerCount = customers.filter((customer) => customer.strategicAccount).length;
  const vendorCount = vendors.length;

  const itemCount = items.length;
  const activeItemCount = items.filter((item) => item.status === "ACTIVE").length;
  const assemblyCount = items.filter((item) => item.type === "ASSEMBLY" || item.type === "MANUFACTURED").length;
  const obsoleteItemCount = items.filter((item) => item.status === "OBSOLETE").length;
  const warehouseCount = warehouses.length;
  const locationCount = sumNumber(warehouses.map((warehouse) => warehouse.locationCount));

  const purchaseOrderCount = purchaseOrders.length;
  const openPurchaseOrderCount = purchaseOrders.filter((order) => order.status !== "CLOSED").length;
  const issuedPurchaseOrderCount = purchaseOrders.filter((order) => order.status === "ISSUED" || order.status === "APPROVED").length;
  const closedPurchaseOrderCount = purchaseOrders.filter((order) => order.status === "CLOSED").length;
  const purchaseOrderValue = sumNumber(purchaseOrders.map((order) => order.total));

  const workOrderCount = workOrders.length;
  const activeWorkOrderCount = workOrders.filter((workOrder) => workOrder.status === "RELEASED" || workOrder.status === "IN_PROGRESS" || workOrder.status === "ON_HOLD").length;
  const releasedWorkOrderCount = workOrders.filter((workOrder) => workOrder.status === "RELEASED").length;
  const inProgressWorkOrderCount = workOrders.filter((workOrder) => workOrder.status === "IN_PROGRESS").length;
  const overdueWorkOrderCount = workOrders.filter((workOrder) => workOrder.dueDate && workOrder.status !== "COMPLETE" && workOrder.status !== "CANCELLED" && new Date(workOrder.dueDate).getTime() < Date.now()).length;

  const quoteCount = quotes.length;
  const orderCount = orders.length;
  const draftQuoteCount = quotes.filter((quote) => quote.status === "DRAFT").length;
  const approvedQuoteCount = quotes.filter((quote) => quote.status === "APPROVED").length;
  const issuedOrderCount = orders.filter((order) => order.status === "ISSUED" || order.status === "APPROVED").length;
  const quoteValue = sumNumber(quotes.map((quote) => quote.total));
  const orderValue = sumNumber(orders.map((order) => order.total));

  const shipmentCount = shipments.length;
  const activeShipmentCount = shipments.filter((shipment) => shipment.status !== "DELIVERED").length;
  const inTransitCount = shipments.filter((shipment) => shipment.status === "SHIPPED").length;
  const deliveredCount = shipments.filter((shipment) => shipment.status === "DELIVERED").length;

  const projectCount = projects.length;
  const activeProjectCount = projects.filter((project) => project.status === "ACTIVE").length;
  const atRiskProjectCount = projects.filter((project) => project.status === "AT_RISK").length;
  const overdueProjectCount = projects.filter((project) => {
    if (!project.dueDate || project.status === "COMPLETE") {
      return false;
    }

    return new Date(project.dueDate).getTime() < Date.now();
  }).length;

  const shortageItemCount = planningRollup?.summary.uncoveredItemCount ?? 0;
  const buyRecommendationCount = planningRollup?.summary.purchaseRecommendationCount ?? 0;
  const buildRecommendationCount = planningRollup?.summary.buildRecommendationCount ?? 0;
  const totalUncoveredQuantity = planningRollup?.summary.totalUncoveredQuantity ?? 0;
  const planningItemCount = planningRollup?.summary.itemCount ?? 0;

  const metricCards = [
    {
      label: "Accounts",
      value: snapshot?.customers !== null ? `${customerCount + vendorCount}` : "No access",
      secondary: snapshot?.customers !== null ? `${activeCustomerCount} active customers` : "",
      tone: "bg-emerald-500",
    },
    {
      label: "Inventory",
      value: snapshot?.items !== null ? `${itemCount}` : "No access",
      secondary: snapshot?.items !== null ? `${assemblyCount} buildable items` : "",
      tone: "bg-sky-500",
    },
    {
      label: "Open Supply",
      value: snapshot?.purchaseOrders !== null || snapshot?.workOrders !== null ? `${openPurchaseOrderCount + activeWorkOrderCount}` : "No access",
      secondary: snapshot?.purchaseOrders !== null ? `${openPurchaseOrderCount} PO | ${activeWorkOrderCount} WO` : "",
      tone: "bg-teal-500",
    },
    {
      label: "Commercial",
      value: snapshot?.quotes !== null || snapshot?.orders !== null ? formatCurrency(quoteValue + orderValue) : "No access",
      secondary: snapshot?.orders !== null ? `${orderCount} orders live` : "",
      tone: "bg-amber-500",
    },
    {
      label: "Projects",
      value: snapshot?.projects !== null ? `${activeProjectCount}` : "No access",
      secondary: snapshot?.projects !== null ? `${atRiskProjectCount} at risk` : "",
      tone: "bg-violet-500",
    },
    {
      label: "Readiness",
      value: planningRollup ? `${shortageItemCount}` : "No access",
      secondary: planningRollup ? `${totalUncoveredQuantity} units uncovered` : "",
      tone: "bg-rose-500",
    },
  ];

  return (
    <div className="space-y-4">
      {error ? <div className="rounded-[18px] border border-amber-400/30 bg-amber-500/12 px-3 py-3 text-sm text-amber-700 dark:text-amber-300">{error}</div> : null}
      <section className="grid gap-3 xl:grid-cols-6">
        {metricCards.map((card) => (
          <article key={card.label} className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">{card.label}</p>
            <div className="mt-2 text-xl font-extrabold text-text">{isLoading ? "Loading..." : card.value}</div>
            <div className="mt-2 flex items-center gap-3">
              <div className="h-2 flex-1 overflow-hidden rounded-full bg-page/80">
                <div className={`h-full rounded-full ${card.tone}`} style={{ width: isLoading ? "35%" : "100%" }} />
              </div>
              <span className="text-xs text-muted">Live</span>
            </div>
            {card.secondary ? <div className="mt-2 text-xs text-muted">{card.secondary}</div> : null}
          </article>
        ))}
      </section>
      <section className="grid gap-3 xl:grid-cols-[1.2fr_0.8fr]">
        <DashboardCard eyebrow="Commercial Surface" title="Revenue and document mix">
          <div className="mt-4 grid gap-3 sm:grid-cols-2">
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Quotes</div>
              <div className="mt-2 text-2xl font-bold text-text">{snapshot?.quotes !== null ? formatCurrency(quoteValue) : "No access"}</div>
              <div className="mt-3 space-y-2">
                <div className="flex items-center justify-between text-xs text-muted">
                  <span>Draft</span>
                  <span>{draftQuoteCount}</span>
                </div>
                <ProgressBar value={draftQuoteCount} total={Math.max(quoteCount, 1)} tone="bg-amber-500" />
                <div className="flex items-center justify-between text-xs text-muted">
                  <span>Approved</span>
                  <span>{approvedQuoteCount}</span>
                </div>
                <ProgressBar value={approvedQuoteCount} total={Math.max(quoteCount, 1)} tone="bg-emerald-500" />
              </div>
            </div>
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Orders</div>
              <div className="mt-2 text-2xl font-bold text-text">{snapshot?.orders !== null ? formatCurrency(orderValue) : "No access"}</div>
              <div className="mt-3 grid gap-3 sm:grid-cols-2">
                <div>
                  <div className="text-xs text-muted">Issued / approved</div>
                  <div className="mt-1 text-lg font-semibold text-text">{issuedOrderCount}</div>
                </div>
                <div>
                  <div className="text-xs text-muted">Total orders</div>
                  <div className="mt-1 text-lg font-semibold text-text">{orderCount}</div>
                </div>
              </div>
              <div className="mt-3">
                <ProgressBar value={issuedOrderCount} total={Math.max(orderCount, 1)} tone="bg-brand" />
              </div>
            </div>
          </div>
        </DashboardCard>
        <DashboardCard eyebrow="CRM Footprint" title="Customer and vendor balance">
          <div className="mt-4 space-y-4">
            <div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted">Active customers</span>
                <span className="font-semibold text-text">{snapshot?.customers !== null ? formatPercent(activeCustomerCount, Math.max(customerCount, 1)) : "No access"}</span>
              </div>
              <div className="mt-2">
                <ProgressBar value={activeCustomerCount} total={Math.max(customerCount, 1)} tone="bg-emerald-500" />
              </div>
            </div>
            <div className="grid gap-3 sm:grid-cols-3">
              <div className="rounded-[16px] border border-line/70 bg-page/60 px-3 py-3">
                <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Customers</div>
                <div className="mt-1 text-lg font-bold text-text">{customerCount}</div>
              </div>
              <div className="rounded-[16px] border border-line/70 bg-page/60 px-3 py-3">
                <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Resellers</div>
                <div className="mt-1 text-lg font-bold text-text">{resellerCount}</div>
              </div>
              <div className="rounded-[16px] border border-line/70 bg-page/60 px-3 py-3">
                <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Vendors</div>
                <div className="mt-1 text-lg font-bold text-text">{vendorCount}</div>
              </div>
            </div>
            <div className="rounded-[16px] border border-line/70 bg-page/60 px-3 py-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted">Strategic accounts</span>
                <span className="font-semibold text-text">{strategicCustomerCount}</span>
              </div>
              <div className="mt-2">
                <ProgressBar value={strategicCustomerCount} total={Math.max(customerCount, 1)} tone="bg-violet-500" />
              </div>
            </div>
          </div>
        </DashboardCard>
      </section>
      <section className="grid gap-3 xl:grid-cols-3">
        <DashboardCard eyebrow="Inventory and Supply" title="Stock posture">
          <div className="mt-4 grid gap-3 sm:grid-cols-2">
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Item mix</div>
              <div className="mt-3 space-y-3">
                <div>
                  <div className="flex items-center justify-between text-xs text-muted">
                    <span>Active items</span>
                    <span>{activeItemCount}</span>
                  </div>
                  <div className="mt-2">
                    <ProgressBar value={activeItemCount} total={Math.max(itemCount, 1)} tone="bg-sky-500" />
                  </div>
                </div>
                <div>
                  <div className="flex items-center justify-between text-xs text-muted">
                    <span>Buildable items</span>
                    <span>{assemblyCount}</span>
                  </div>
                  <div className="mt-2">
                    <ProgressBar value={assemblyCount} total={Math.max(itemCount, 1)} tone="bg-indigo-500" />
                  </div>
                </div>
                <div>
                  <div className="flex items-center justify-between text-xs text-muted">
                    <span>Obsolete items</span>
                    <span>{obsoleteItemCount}</span>
                  </div>
                  <div className="mt-2">
                    <ProgressBar value={obsoleteItemCount} total={Math.max(itemCount, 1)} tone="bg-slate-500" />
                  </div>
                </div>
              </div>
            </div>
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Storage surface</div>
              <div className="mt-3 grid gap-3">
                <div className="rounded-[16px] border border-line/70 bg-surface/80 px-3 py-3">
                  <div className="text-xs text-muted">Warehouses</div>
                  <div className="mt-1 text-lg font-bold text-text">{warehouseCount}</div>
                </div>
                <div className="rounded-[16px] border border-line/70 bg-surface/80 px-3 py-3">
                  <div className="text-xs text-muted">Locations</div>
                  <div className="mt-1 text-lg font-bold text-text">{locationCount}</div>
                </div>
              </div>
            </div>
          </div>
        </DashboardCard>
        <DashboardCard eyebrow="Supply Execution" title="Purchasing and manufacturing flow">
          <div className="mt-4 rounded-[18px] border border-line/70 bg-page/60 p-3">
            <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Open workload split</div>
            <div className="mt-3">
              <StackedBar
                segments={[
                  { value: openPurchaseOrderCount, tone: "bg-teal-500" },
                  { value: releasedWorkOrderCount, tone: "bg-indigo-500" },
                  { value: inProgressWorkOrderCount, tone: "bg-amber-500" },
                  { value: overdueWorkOrderCount, tone: "bg-rose-500" },
                ]}
              />
            </div>
            <div className="mt-4 grid gap-3 sm:grid-cols-2">
              <div className="rounded-[16px] border border-line/70 bg-surface/80 px-3 py-3">
                <div className="text-xs text-muted">Open PO queue</div>
                <div className="mt-1 text-lg font-bold text-text">{openPurchaseOrderCount}</div>
                <div className="mt-1 text-xs text-muted">{formatCurrency(purchaseOrderValue)} committed</div>
              </div>
              <div className="rounded-[16px] border border-line/70 bg-surface/80 px-3 py-3">
                <div className="text-xs text-muted">Active work orders</div>
                <div className="mt-1 text-lg font-bold text-text">{activeWorkOrderCount}</div>
                <div className="mt-1 text-xs text-muted">{overdueWorkOrderCount} overdue</div>
              </div>
              <div className="rounded-[16px] border border-line/70 bg-surface/80 px-3 py-3">
                <div className="text-xs text-muted">Issued / approved POs</div>
                <div className="mt-1 text-lg font-bold text-text">{issuedPurchaseOrderCount}</div>
              </div>
              <div className="rounded-[16px] border border-line/70 bg-surface/80 px-3 py-3">
                <div className="text-xs text-muted">Released WOs</div>
                <div className="mt-1 text-lg font-bold text-text">{releasedWorkOrderCount}</div>
              </div>
            </div>
          </div>
        </DashboardCard>
        <DashboardCard eyebrow="Readiness" title="Planning pressure">
          <div className="mt-4 space-y-3">
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted">Shortage items</span>
                <span className="font-semibold text-text">{planningRollup ? shortageItemCount : "No access"}</span>
              </div>
              <div className="mt-2">
                <ProgressBar value={shortageItemCount} total={Math.max(planningItemCount, 1)} tone="bg-rose-500" />
              </div>
            </div>
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Build vs buy</div>
              <div className="mt-3">
                <StackedBar
                  segments={[
                    { value: buildRecommendationCount, tone: "bg-indigo-500" },
                    { value: buyRecommendationCount, tone: "bg-teal-500" },
                  ]}
                />
              </div>
              <div className="mt-3 grid gap-3 sm:grid-cols-2">
                <div>
                  <div className="text-xs text-muted">Build recommendations</div>
                  <div className="mt-1 text-lg font-bold text-text">{planningRollup ? buildRecommendationCount : "No access"}</div>
                </div>
                <div>
                  <div className="text-xs text-muted">Buy recommendations</div>
                  <div className="mt-1 text-lg font-bold text-text">{planningRollup ? buyRecommendationCount : "No access"}</div>
                </div>
              </div>
            </div>
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs text-muted">Uncovered quantity</div>
              <div className="mt-1 text-lg font-bold text-text">{planningRollup ? totalUncoveredQuantity : "No access"}</div>
            </div>
          </div>
        </DashboardCard>
      </section>
      <section className="grid gap-3 xl:grid-cols-[0.95fr_1.05fr]">
        <DashboardCard eyebrow="Programs" title="Project and shipment execution">
          <div className="mt-4 grid gap-3 sm:grid-cols-2">
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Projects</div>
              <div className="mt-3">
                <StackedBar
                  segments={[
                    { value: activeProjectCount, tone: "bg-violet-500" },
                    { value: atRiskProjectCount, tone: "bg-amber-500" },
                    { value: overdueProjectCount, tone: "bg-rose-500" },
                  ]}
                />
              </div>
              <div className="mt-4 grid gap-3 sm:grid-cols-3">
                <div>
                  <div className="text-xs text-muted">Active</div>
                  <div className="mt-1 font-semibold text-text">{activeProjectCount}</div>
                </div>
                <div>
                  <div className="text-xs text-muted">At risk</div>
                  <div className="mt-1 font-semibold text-text">{atRiskProjectCount}</div>
                </div>
                <div>
                  <div className="text-xs text-muted">Overdue</div>
                  <div className="mt-1 font-semibold text-text">{overdueProjectCount}</div>
                </div>
              </div>
            </div>
            <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
              <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Shipping</div>
              <div className="mt-3">
                <StackedBar
                  segments={[
                    { value: activeShipmentCount, tone: "bg-brand" },
                    { value: inTransitCount, tone: "bg-sky-500" },
                    { value: deliveredCount, tone: "bg-emerald-500" },
                  ]}
                />
              </div>
              <div className="mt-4 grid gap-3 sm:grid-cols-3">
                <div>
                  <div className="text-xs text-muted">Open</div>
                  <div className="mt-1 font-semibold text-text">{activeShipmentCount}</div>
                </div>
                <div>
                  <div className="text-xs text-muted">In transit</div>
                  <div className="mt-1 font-semibold text-text">{inTransitCount}</div>
                </div>
                <div>
                  <div className="text-xs text-muted">Delivered</div>
                  <div className="mt-1 font-semibold text-text">{deliveredCount}</div>
                </div>
              </div>
            </div>
          </div>
        </DashboardCard>
        <DashboardCard eyebrow="Operations Mix" title="Cross-module volume">
          <div className="mt-4 space-y-3">
            {[
              { label: "Customers", value: customerCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-emerald-500" },
              { label: "Inventory items", value: itemCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-sky-500" },
              { label: "Sales orders", value: orderCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-amber-500" },
              { label: "Purchase orders", value: purchaseOrderCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-teal-500" },
              { label: "Work orders", value: workOrderCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-indigo-500" },
              { label: "Shipments", value: shipmentCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-brand" },
              { label: "Projects", value: projectCount, total: Math.max(customerCount, vendorCount, itemCount, orderCount, purchaseOrderCount, workOrderCount, shipmentCount, projectCount, 1), tone: "bg-violet-500" },
            ].map((row) => (
              <div key={row.label} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted">{row.label}</span>
                  <span className="font-semibold text-text">{row.value}</span>
                </div>
                <div className="mt-2">
                  <ProgressBar value={row.value} total={row.total} tone={row.tone} />
                </div>
              </div>
            ))}
          </div>
          {snapshot ? <div className="mt-4 text-xs text-muted">Refreshed {new Date(snapshot.refreshedAt).toLocaleString()}</div> : null}
        </DashboardCard>
      </section>
    </div>
  );
}