import { SimpleGrid } from "@mantine/core";
import { CheckCircle2, Clock3, Truck, Wallet } from "lucide-react";
import { memo } from "react";
import { formatCurrency } from "@/pages/billing/invoices.mock";
import { formatPct } from "../constants";
import { Card } from "./Card";
import { StatKpi } from "./StatKpi";

interface StatsSectionProps {
  activeBookingsLength: number;
  newActiveThisWeek: number;
  bookingsLoading: 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({
  activeBookingsLength,
  newActiveThisWeek,
  bookingsLoading,
  outstandingInvoicesLength,
  totalOutstanding,
  deliveredCount,
  completionRate,
  spendYtd,
  spendYtdChangePct,
}: StatsSectionProps) {
  return (
    <Card className="rounded-2xl border border-edr-border bg-gradient-to-br from-white to-edr-soft px-7 py-5">
      <SimpleGrid cols={{ base: 2, lg: 4 }} spacing={0} verticalSpacing={20}>
        <StatKpi
          icon={Truck}
          label="Active Shipments"
          value={bookingsLoading ? "—" : activeBookingsLength.toString()}
          delta={bookingsLoading ? "" : `+${newActiveThisWeek} this week`}
          deltaColor="edr-green.7"
        />
        <StatKpi
          icon={Clock3}
          label="Awaiting Payment"
          value={outstandingInvoicesLength.toString()}
          delta={`${formatCurrency(totalOutstanding || 0, "ETB")} due`}
          deltaColor="edr-amber-text"
          divider
        />
        <StatKpi
          icon={CheckCircle2}
          label="Delivered (YTD)"
          value={deliveredCount ?? "—"}
          delta={completionRate ? `${completionRate}% completed` : ""}
          deltaColor="edr-muted"
          divider
        />
        <StatKpi
          icon={Wallet}
          label="Spend YTD"
          value={spendYtd ?? "—"}
          delta={spendYtdChangePct ? `${formatPct(spendYtdChangePct)} YoY` : ""}
          deltaColor="edr-green.7"
          divider
        />
      </SimpleGrid>
    </Card>
  );
});
