import { ClipboardList, Inbox, CheckCircle2, Timer, type LucideIcon } from "lucide-react";
import { fmtNum } from "../lib/formatters";

export interface StatsBarProps {
  total: number;
  offered: number;
  accepted: number;
  avgLeadTime: number | null; // روز
}

export function StatsBar({ total, offered, accepted, avgLeadTime }: StatsBarProps) {
  const stats: {
    label: string;
    shortLabel: string;
    value: string;
    color: string;
    icon: LucideIcon;
  }[] = [
    {
      label: "کل پیشنهادها",
      shortLabel: "کل",
      value: fmtNum(total),
      color: "text-ink",
      icon: ClipboardList,
    },
    {
      label: "پیشنهاد باز",
      shortLabel: "باز",
      value: fmtNum(offered),
      color: "text-amber",
      icon: Inbox,
    },
    {
      label: "پذیرفته‌شده",
      shortLabel: "پذیرفته",
      value: fmtNum(accepted),
      color: "text-[#1d4ed8]",
      icon: CheckCircle2,
    },
    {
      label: "میانگین lead time (روز)",
      shortLabel: "زمان تحویل",
      value: avgLeadTime == null ? "—" : fmtNum(avgLeadTime),
      color: "text-green",
      icon: Timer,
    },
  ];

  return (
    <section className="grid grid-cols-4 gap-1.5 sm:gap-3">
      {stats.map((s) => (
        <div
          key={s.label}
          className="rounded-xl border border-line bg-panel p-2 text-center transition-colors hover:border-accent/40 sm:rounded-lg sm:p-3.5 sm:text-right"
        >
          {/* عنوان کارت */}
          <div className="flex items-center justify-center sm:justify-between">
            <span className="truncate text-[10px] font-medium text-muted sm:text-[11px]">
              <span className="sm:hidden">{s.shortLabel}</span>
              <span className="hidden sm:inline">{s.label}</span>
            </span>

            {/* آیکون در موبایل حذف شده تا فضا برای متن باز بماند */}
            <span className="hidden h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-bg text-muted sm:flex">
              <s.icon className="h-3.5 w-3.5" strokeWidth={2} />
            </span>
          </div>

          {/* مقدار عددی */}
          <div
            className={`mt-0.5 text-base font-extrabold leading-5 tabular-nums sm:mt-1 sm:text-[22px] sm:leading-8 ${s.color}`}
          >
            {s.value}
          </div>
        </div>
      ))}
    </section>
  );
}