"use client"

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { Users, Timer, Star, TrendingUp, TrendingDown, Minus } from "lucide-react"
import { useOffres } from "@/app/hooks/useOffres"

function AnimatedNumber({ valeur, suffix = "" }: { valeur: number; suffix?: string }) {
  const [affiche, setAffiche] = useState(0)

  useEffect(() => {
    let start = 0
    const duration = 1000
    const step = 16
    const increment = valeur / (duration / step)

    const timer = setInterval(() => {
      start += increment
      if (start >= valeur) {
        setAffiche(valeur)
        clearInterval(timer)
      } else {
        setAffiche(Math.floor(start))
      }
    }, step)

    return () => clearInterval(timer)
  }, [valeur])

  return <>{affiche.toLocaleString("fr-FR")}{suffix}</>
}

interface Carte {
  titre: string
  valeur: number
  suffix: string
  sousTexte: string
  tendance: "hausse" | "baisse" | "neutre"
  pourcentage: string
  icon: React.ReactNode
  bg: string
  color: string
  objectif?: string
}

export default function ResumeFooter() {
  const { offres } = useOffres()

  // Calculs dynamiques depuis les vraies données
  const totalCandidats = offres.reduce((acc, o) => acc + o.candidats, 0)
  const offresActives  = offres.filter(o => o.statut === "Actif").length
  const offresTotal    = offres.length

  const tauxAcceptation = offresTotal > 0
    ? Math.round((offresActives / offresTotal) * 100)
    : 0

  // Temps moyen estimé (fictif mais cohérent)
  const tempsMoyen = offresTotal > 0 ? 18 : 0

  const cartes: Carte[] = [
    {
      titre:       "Total Candidats",
      valeur:      totalCandidats,
      suffix:      "",
      sousTexte:   totalCandidats > 0 ? "Candidats sur toutes vos offres" : "Aucun candidat pour le moment",
      tendance:    totalCandidats > 100 ? "hausse" : totalCandidats > 0 ? "neutre" : "baisse",
      pourcentage: "+12%",
      icon:        <Users size={18} />,
      bg:          "bg-blue-50 dark:bg-blue-900/20",
      color:       "text-blue-600 dark:text-blue-400",
    },
    {
      titre:       "Temps moyen de recrutement",
      valeur:      tempsMoyen,
      suffix:      " j",
      sousTexte:   "Objectif : moins de 15 jours",
      tendance:    tempsMoyen <= 15 ? "hausse" : "baisse",
      pourcentage: tempsMoyen <= 15 ? "✓ Objectif atteint" : "Objectif non atteint",
      icon:        <Timer size={18} />,
      bg:          "bg-emerald-50 dark:bg-emerald-900/20",
      color:       "text-emerald-600 dark:text-emerald-400",
    },
    {
      titre:       "Taux d'acceptation",
      valeur:      tauxAcceptation,
      suffix:      "%",
      sousTexte:   `${offresActives} offre${offresActives > 1 ? "s" : ""} active${offresActives > 1 ? "s" : ""} sur ${offresTotal}`,
      tendance:    tauxAcceptation >= 70 ? "hausse" : tauxAcceptation >= 40 ? "neutre" : "baisse",
      pourcentage: tauxAcceptation >= 70 ? "Excellent" : tauxAcceptation >= 40 ? "Moyen" : "À améliorer",
      icon:        <Star size={18} />,
      bg:          "bg-amber-50 dark:bg-amber-900/20",
      color:       "text-amber-600 dark:text-amber-400",
    },
  ]

  const TendanceIcon = ({ t }: { t: Carte["tendance"] }) => {
    if (t === "hausse") return <TrendingUp size={13} className="text-emerald-500" />
    if (t === "baisse") return <TrendingDown size={13} className="text-red-500" />
    return <Minus size={13} className="text-slate-400" />
  }

  const couleurTendance = (t: Carte["tendance"]) => {
    if (t === "hausse") return "text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20"
    if (t === "baisse") return "text-red-500 bg-red-50 dark:bg-red-900/20"
    return "text-slate-500 bg-slate-100 dark:bg-slate-800"
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-8">
      {cartes.map((c, i) => (
        <motion.div
          key={i}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: i * 0.1 }}
          whileHover={{ y: -2, transition: { duration: 0.2 } }}
          className="bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow"
        >
          {/* Header carte */}
          <div className="flex items-start justify-between mb-5">
            <div className="flex items-center gap-3">
              <div className={`p-2.5 rounded-xl ${c.bg}`}>
                <span className={c.color}>{c.icon}</span>
              </div>
              <h3 className="text-sm font-semibold text-slate-600 dark:text-slate-400 leading-tight">
                {c.titre}
              </h3>
            </div>

            {/* Badge tendance */}
            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold ${couleurTendance(c.tendance)}`}>
              <TendanceIcon t={c.tendance} />
              {c.pourcentage}
            </span>
          </div>

          {/* Valeur principale animée */}
          <div className="mb-3">
            <p className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
              <AnimatedNumber valeur={c.valeur} suffix={c.suffix} />
            </p>
          </div>

          {/* Barre de progression */}
          <div className="mb-3">
            <div className="w-full h-1.5 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${Math.min(c.valeur, 100)}%` }}
                transition={{ delay: i * 0.1 + 0.4, duration: 0.8, ease: "easeOut" }}
                className={`h-full rounded-full ${
                  c.tendance === "hausse" ? "bg-emerald-500"
                  : c.tendance === "baisse" ? "bg-red-400"
                  : "bg-blue-400"
                }`}
              />
            </div>
          </div>

          {/* Sous texte */}
          <p className="text-xs text-slate-400 dark:text-slate-500">{c.sousTexte}</p>
        </motion.div>
      ))}
    </div>
  )
}