import { Boxes, CheckCircle2, ShoppingCart, Timer, type LucideIcon } from "lucide-react";
import { formatMinutes, formatNumber } from "@/lib/format";
import { publicTexts } from "@/lib/i18n/public";
import { cn } from "@/lib/utils";

export type LandingStats = {
  totalOrders: number;
  completedOrders: number;
  servicesCount: number;
  avgMinutes: number;
};

function Stat({
  icon: Icon,
  tint,
  value,
  label,
}: {
  icon: LucideIcon;
  tint: string;
  value: string;
  label: string;
}) {
  return (
    <div className="flex flex-col gap-3 p-6 sm:p-7">
      <span
        aria-hidden
        className={cn(
          "flex size-9 items-center justify-center rounded-xl",
          tint,
        )}
      >
        <Icon className="size-[18px]" />
      </span>
      <div>
        <div className="font-mono text-[1.75rem] leading-none font-semibold tracking-tight tabular sm:text-3xl">
          {value}
        </div>
        <div className="mt-2 text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
          {label}
        </div>
      </div>
    </div>
  );
}

/** Live numbers pulled from the database, overlapping the bottom edge of the hero. */
export function StatsBand({ stats }: { stats: LandingStats }) {
  return (
    <section className="relative z-10 -mt-28 lg:-mt-32">
      <div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
        <h2 className="sr-only">{publicTexts.statsTitle}</h2>
        <div className="grid grid-cols-1 divide-y overflow-hidden rounded-2xl border bg-card shadow-sm sm:grid-cols-2 sm:divide-x lg:grid-cols-4">
          <Stat
            icon={ShoppingCart}
            tint="bg-blue-100 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400"
            value={formatNumber(stats.totalOrders, 0)}
            label={publicTexts.statTotalOrders}
          />
          <Stat
            icon={CheckCircle2}
            tint="bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400"
            value={formatNumber(stats.completedOrders, 0)}
            label={publicTexts.statCompletedOrders}
          />
          <Stat
            icon={Boxes}
            tint="bg-cyan-100 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-400"
            value={formatNumber(stats.servicesCount, 0)}
            label={publicTexts.statServices}
          />
          <Stat
            icon={Timer}
            tint="bg-violet-100 text-violet-600 dark:bg-violet-500/15 dark:text-violet-400"
            value={stats.avgMinutes > 0 ? formatMinutes(stats.avgMinutes) : "—"}
            label={publicTexts.statAvgTime}
          />
        </div>
        <p className="mt-3 text-center text-xs text-muted-foreground">
          {publicTexts.statsFootnote}
        </p>
      </div>
    </section>
  );
}

export default StatsBand;