"use client";

import { motion } from "framer-motion";
import {
  Gavel,
  Users,
  CircleSlash,
  Trophy,
  ShieldAlert,
  SkipForward,
} from "lucide-react";
import AnimatedCounter from "@/components/ui/AnimatedCounter";

export type AnnualResultsStatCard = {
  label: string;
  value: string | number;
  variant?: "purple" | "orange" | "blue" | "pink" | "green";
  icon?: "gavel" | "users" | "withdrawn" | "unsold" | "sold" | "skipped";
};

function resolveVariant(variant?: AnnualResultsStatCard["variant"]) {
  switch (variant) {
    case "orange":
      return {
        wrapper: "bg-gradient-to-br from-orange-500 to-amber-500 text-white",
        accent: "bg-white/12",
      };
    case "blue":
      return {
        wrapper: "bg-gradient-to-br from-blue-500 to-indigo-500 text-white",
        accent: "bg-white/12",
      };
    case "pink":
      return {
        wrapper: "bg-gradient-to-br from-fuchsia-500 to-pink-600 text-white",
        accent: "bg-white/12",
      };
    case "green":
      return {
        wrapper: "bg-gradient-to-br from-emerald-500 to-teal-600 text-white",
        accent: "bg-white/12",
      };
    case "purple":
    default:
      return {
        wrapper: "bg-gradient-to-br from-violet-500 to-purple-600 text-white",
        accent: "bg-white/12",
      };
  }
}

function resolveIcon(icon?: AnnualResultsStatCard["icon"]) {
  switch (icon) {
    case "users":
      return Users;
    case "withdrawn":
      return ShieldAlert;
    case "unsold":
      return CircleSlash;
    case "skipped":
      return SkipForward;
    case "sold":
      return Trophy;
    case "gavel":
    default:
      return Gavel;
  }
}

export default function AnnualResultsStatsCards({
  stats,
}: {
  stats: AnnualResultsStatCard[];
}) {
  if (!stats?.length) return null;

  return (
    <div className="w-full">
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
        {stats.map((s, idx) => {
          const v = resolveVariant(s.variant);
          const Icon = resolveIcon(s.icon);

          return (
            <motion.div
              key={`${s.label}-${idx}`}
              initial={{ opacity: 0, y: 16, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              transition={{ duration: 0.35, delay: idx * 0.05 }}
              whileHover={{ y: -4, scale: 1.01 }}
              className={`${v.wrapper} rounded-2xl overflow-hidden shadow-md relative`}
            >
              <div className="absolute -bottom-10 -left-10 w-28 h-28 rounded-full bg-white/10" />
              <div className="absolute -top-10 -right-10 w-28 h-28 rounded-full bg-white/10" />

              <div className="p-4 flex items-center justify-between gap-3">
                <div className="min-w-0">
                  <div className="text-xs font-bold text-white/90 truncate">
                    {s.label}
                  </div>
                  <div className="mt-1 text-2xl font-extrabold tracking-tight">
                    <AnimatedCounter
                      value={s.value}
                      duration={1500 + idx * 200}
                      className="tabular-nums"
                    />
                  </div>
                </div>

                <div
                  className={`${v.accent} w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0`}
                >
                  <Icon className="w-5 h-5" />
                </div>
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}