'use client'

import { useEffect, useState } from "react"
import { motion } from "framer-motion"

interface Props {
  titre: string
  valeur: string // Ex: "65%" ou "4500 €" ou "1240"
  evolution?: string
  positif?: boolean
}

export default function CarteStatistique({
  titre,
  valeur,
  evolution,
  positif
}: Props) {
  const [compteur, setCompteur] = useState(0)
  const isPourcentage = valeur.includes("%")
  const isNombre = /\d/.test(valeur) && !isPourcentage

  // Extraire le nombre pour l'animation
  const valeurNum = isPourcentage
    ? Number(valeur.replace("%", ""))
    : Number(valeur.replace(/[^\d]/g, "")) // Ex: "4500 €" → 4500

  useEffect(() => {
    let start = 0
    const duration = 1200
    const stepTime = 20
    const steps = Math.ceil(duration / stepTime)
    const increment = valeurNum / steps
    let currentStep = 0

    const timer = setInterval(() => {
      currentStep++
      const newValue = Math.min(start + increment * currentStep, valeurNum)
      setCompteur(parseFloat(newValue.toFixed(isPourcentage ? 1 : 0)))
      if (currentStep >= steps) clearInterval(timer)
    }, stepTime)

    return () => clearInterval(timer)
  }, [valeurNum, isPourcentage])

  // Déterminer la couleur de la barre si c'est un pourcentage
  const couleurBarre = isPourcentage
    ? compteur <= 40
      ? "bg-red-500"
      : compteur <= 70
      ? "bg-orange-500"
      : "bg-green-500"
    : "bg-blue-500"

  return (
    <motion.div
      whileHover={{ y: -6 }}
      className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm hover:shadow-xl transition relative overflow-hidden"
    >
      <div className="flex justify-between items-center mb-2">
        <p className="text-sm text-slate-500 dark:text-slate-400">{titre}</p>
        {/* Ici tu peux ajouter une icône à droite si tu veux */}
      </div>

      <h3 className="text-3xl font-extrabold text-slate-900 dark:text-slate-100 leading-tight">
        {isPourcentage
          ? `${compteur}%`
          : compteur.toLocaleString() + (isNombre && valeur.includes("€") ? " €" : "")}
      </h3>

      {evolution && (
        <p
          className={`text-xs mt-1 font-semibold ${
            positif ? "text-green-600" : "text-red-500"
          }`}
        >
          {evolution} cette période
        </p>
      )}

      {/* Barre de progression pour les pourcentages seulement */}
      {isPourcentage && (
        <div className="w-full h-2 bg-slate-200 dark:bg-slate-800 rounded-full mt-4 overflow-hidden">
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: `${compteur}%` }}
            transition={{ duration: 1.2, ease: "easeOut" }}
            className={`h-full rounded-full ${couleurBarre}`}
          />
        </div>
      )}
    </motion.div>
  )
}