"use client";

import { motion } from "framer-motion";
import { Users, BookOpen, Trophy, Zap } from "lucide-react";
import { useInView } from "framer-motion";
import { useRef, useEffect, useState } from "react";

interface Stats {
  quizCount: number;
  userCount: number;
  resultCount: number;
}

function CountUp({ value, suffix = "" }: { value: number; suffix?: string }) {
  const [count, setCount] = useState(0);
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  useEffect(() => {
    if (!isInView) return;
    const duration = 2000;
    const steps = 60;
    const increment = value / steps;
    let current = 0;
    const timer = setInterval(() => {
      current += increment;
      if (current >= value) {
        setCount(value);
        clearInterval(timer);
      } else {
        setCount(Math.floor(current));
      }
    }, duration / steps);
    return () => clearInterval(timer);
  }, [isInView, value]);

  return (
    <span ref={ref}>
      {count.toLocaleString("id-ID")}
      {suffix}
    </span>
  );
}

export function StatsSection({ stats }: { stats: Stats }) {
  const statItems = [
    {
      icon: BookOpen,
      value: stats.quizCount,
      suffix: "+",
      label: "Quiz Tersedia",
      color: "text-indigo-500",
      bg: "bg-indigo-500/10",
    },
    {
      icon: Users,
      value: stats.userCount,
      suffix: "+",
      label: "Pengguna Aktif",
      color: "text-violet-500",
      bg: "bg-violet-500/10",
    },
    {
      icon: Zap,
      value: stats.resultCount,
      suffix: "+",
      label: "Quiz Dimainkan",
      color: "text-amber-500",
      bg: "bg-amber-500/10",
    },
    {
      icon: Trophy,
      value: 100,
      suffix: "%",
      label: "Gratis Selamanya",
      color: "text-emerald-500",
      bg: "bg-emerald-500/10",
    },
  ];

  return (
    <section className="py-20 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {statItems.map((item, i) => {
            const Icon = item.icon;
            return (
              <motion.div
                key={item.label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="bg-card border border-border rounded-2xl p-6 text-center hover:shadow-lg hover:-translate-y-1 transition-all"
              >
                <div className={`w-12 h-12 ${item.bg} rounded-xl flex items-center justify-center mx-auto mb-4`}>
                  <Icon className={`w-6 h-6 ${item.color}`} />
                </div>
                <div className={`text-3xl font-bold ${item.color} mb-1`}>
                  <CountUp value={item.value} suffix={item.suffix} />
                </div>
                <p className="text-sm text-muted-foreground font-medium">{item.label}</p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}