import { formatNumber, parseNumeric } from "@/lib/report-utils";

interface StatCard {
  label: string;
  value: string;
  code: string;
  helper?: string;
}

interface StatCardsProps {
  totals: Record<string, string> | Record<string, number> | undefined;
  currencies: string[];
  highlighted: string | null;
  onHighlight: (code: string | null) => void;
  loading?: boolean;
  className?: string;
  helperTextMap?: Record<string, string>;
}

export function StatCards({ totals, currencies, highlighted, onHighlight, loading = false, className = "mt-8", helperTextMap }: StatCardsProps) {
  const statCards: StatCard[] = currencies.map(code => {
    const totalValue = totals?.[code];
    const numericValue = typeof totalValue === "number" ? totalValue : parseNumeric(totalValue || "");
    return {
      label: "Total",
      value: formatNumber(numericValue),
      code,
      helper: helperTextMap?.[code],
    };
  });

  return (
    <div className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6`}>
      {statCards.map(stat => (
        <button
          key={stat.code}
          onClick={() => onHighlight(highlighted === stat.code ? null : stat.code)}
          className={`relative overflow-hidden rounded-lg border-2 px-5 py-5 shadow-md transition-all duration-300 text-left group ${
            highlighted === stat.code
              ? "border-[#428B4D] bg-gradient-to-br from-[#428B4D]/10 via-white/95 to-[#428B4D]/5 shadow-xl ring-2 ring-[#428B4D]/30 scale-105"
              : "border-white/70 bg-white/95 ring-1 ring-black/5 hover:shadow-lg hover:border-[#428B4D]/40"
          }`}
        >
          <div className={`absolute -top-10 -right-12 h-32 w-32 rounded-lg transition-all duration-300 ${highlighted === stat.code ? "bg-[#428B4D]/15" : "bg-[#428B4D]/5"}`} />
          <div className={`absolute -bottom-16 -left-8 h-32 w-32 rounded-lg blur-2xl transition-all duration-300 ${highlighted === stat.code ? "bg-[#428B4D]/20" : "bg-[#428B4D]/10"}`} />
          <div className="relative z-10 space-y-1.5">
            <p className={`text-xs font-semibold uppercase tracking-wide transition-colors duration-300 ${highlighted === stat.code ? "text-[#428B4D]" : "text-slate-500"}`}>
              {stat.label}
            </p>
            <p className={`text-lg font-bold transition-colors duration-300 ${highlighted === stat.code ? "text-[#428B4D]" : "text-slate-800"}`}>
              {loading ? "—" : `${stat.value} ${stat.code}`}
            </p>
            {stat.helper && (
              <p className="text-xs text-slate-500">{stat.helper}</p>
            )}
          </div>
        </button>
      ))}
    </div>
  );
}