import { ShoppingCart, TrendingDown, TrendingUp, UserPlus, Users, Wallet } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { formatMoney as formatWholeMoney, formatMoneyExact } from "@/lib/format/numbers";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import type { AdminDashboardKpis, AdminDashboardRange } from "../_lib/admin-dashboard-types";
import { ADMIN_DASHBOARD_RANGES } from "../_lib/admin-dashboard-types";

function formatCount(value: number) {
  return new Intl.NumberFormat("en-US").format(value);
}

/** Drops the cents once the figure is large enough that they add noise. */
function formatMoney(value: number) {
  return value >= 1000 ? formatWholeMoney(value, "USD") : formatMoneyExact(value, "USD");
}

function DeltaBadge({ value }: { value: number | null }) {
  if (value == null) return null;
  const positive = value >= 0;
  return (
    <Badge variant={positive ? "default" : "destructive"}>
      {positive ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
      {positive ? "+" : ""}
      {value}%
    </Badge>
  );
}

function rangeLabel(range: AdminDashboardRange) {
  return ADMIN_DASHBOARD_RANGES.find((item) => item.value === range)?.shortLabel ?? range;
}

type MetricCardsProps = {
  kpis: AdminDashboardKpis;
  range: AdminDashboardRange;
};

export function MetricCards({ kpis, range }: MetricCardsProps) {
  const period = rangeLabel(range);

  return (
    <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs xl:grid-cols-4 dark:*:data-[slot=card]:bg-card">
      <Card>
        <CardHeader>
          <CardTitle>
            <div className="flex size-7 items-center justify-center rounded-lg border bg-muted text-muted-foreground">
              <Users className="size-4" />
            </div>
          </CardTitle>
          <CardDescription>Total Customers</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-1">
          <div className="flex flex-wrap items-center gap-2">
            <div className="font-medium text-3xl tabular-nums leading-none tracking-tight">
              {formatCount(kpis.customersTotal)}
            </div>
          </div>
          <p className="text-muted-foreground text-sm">
            {formatCount(kpis.customersActive)} active accounts
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>
            <div className="flex size-7 items-center justify-center rounded-lg border bg-muted text-muted-foreground">
              <UserPlus className="size-4" />
            </div>
          </CardTitle>
          <CardDescription>New Customers</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-1">
          <div className="flex flex-wrap items-center gap-2">
            <div className="font-medium text-3xl tabular-nums leading-none tracking-tight">
              {formatCount(kpis.customersNewInRange)}
            </div>
            <DeltaBadge value={kpis.customersNewDeltaPct} />
          </div>
          <p className="text-muted-foreground text-sm">
            {formatCount(kpis.customersPending)} pending attention · {period}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>
            <div className="flex size-7 items-center justify-center rounded-lg border bg-muted text-muted-foreground">
              <ShoppingCart className="size-4" />
            </div>
          </CardTitle>
          <CardDescription>Orders</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-1">
          <div className="flex flex-wrap items-center gap-2">
            <div className="font-medium text-3xl tabular-nums leading-none tracking-tight">
              {formatCount(kpis.ordersTotalInRange)}
            </div>
          </div>
          <p className="text-muted-foreground text-sm">
            {formatCount(kpis.ordersCompletedInRange)} completed · {period}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>
            <div className="flex size-7 items-center justify-center rounded-lg border bg-muted text-muted-foreground">
              <Wallet className="size-4" />
            </div>
          </CardTitle>
          <CardDescription>Revenue</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-1">
          <div className="flex flex-wrap items-center gap-2">
            <div className="font-medium text-3xl tabular-nums leading-none tracking-tight">
              {formatMoney(kpis.revenueCompletedInRange)}
            </div>
            <DeltaBadge value={kpis.revenueDeltaPct} />
          </div>
          <p className="text-muted-foreground text-sm">
            Completed orders · {period}
            {kpis.staffUsersTotal > 0 ? ` · ${formatCount(kpis.staffUsersTotal)} staff` : null}
          </p>
        </CardContent>
      </Card>
    </div>
  );
}