import { formatCurrency } from "@/lib/currency";
import { SimpleGrid } from "@mantine/core";
import { CheckCircle2, Clock3, Layers, Truck, Wallet } from "lucide-react";
import { memo } from "react";
import { formatPct } from "../constants";
import { Card } from "./Card";
import { StatKpi } from "./StatKpi";

interface StatsSectionProps {
  activeContractsCount: number;
  activeBookingsLength: number;
  newActiveThisWeek: number;
  bookingsLoading: boolean;
  contractsLoading: boolean;
  outstandingInvoicesLength: number;
  totalOutstanding: number;
  deliveredCount: string | undefined;
  completionRate: string | undefined;
  spendYtd: string | undefined;
  spendYtdChangePct: number | undefined;
  dashboardLoading: boolean;
}

export const StatsSection = memo(function StatsSection({
  activeContractsCount,
  activeBookingsLength,
  newActiveThisWeek,
  bookingsLoading,
  contractsLoading,
  outstandingInvoicesLength,
  totalOutstanding,
  deliveredCount,
  completionRate,
  spendYtd,
  spendYtdChangePct,
  dashboardLoading,
}: StatsSectionProps) {
  return (
    <Card
      padding={24}
      className="border-edr-divider! shadow-[0_1px_2px_rgba(16,24,40,0.04)]"
    >
      <SimpleGrid
        cols={{ base: 2, md: 3, lg: 5 }}
        spacing={{ base: 20, lg: 0 }}
      >
        <StatKpi
          icon={Layers}
          accent="green"
          label="Active Contracts"
          value={activeContractsCount.toString()}
          delta=""
          loading={contractsLoading}
        />
        <StatKpi
          icon={Truck}
          accent="green"
          label="Active Shipments"
          value={activeBookingsLength.toString()}
          delta={newActiveThisWeek > 0 ? `+${newActiveThisWeek} this week` : ""}
          loading={bookingsLoading}
          divider
        />
        <StatKpi
          icon={Clock3}
          accent="amber"
          label="Awaiting Payment"
          value={outstandingInvoicesLength.toString()}
          delta={`${formatCurrency(totalOutstanding || 0, "ETB")} due`}
          loading={bookingsLoading}
          divider
        />
        <StatKpi
          icon={CheckCircle2}
          accent="blue"
          label="Delivered (YTD)"
          value={deliveredCount ?? "—"}
          delta={completionRate ? `${completionRate}% completed` : ""}
          deltaTone="muted"
          loading={dashboardLoading}
          divider
        />
        <StatKpi
          icon={Wallet}
          accent="green"
          label="Spend YTD"
          value={spendYtd ?? "—"}
          delta={spendYtdChangePct ? `${formatPct(spendYtdChangePct)} YoY` : ""}
          loading={dashboardLoading}
          divider
        />
      </SimpleGrid>
    </Card>
  );
});
