import { motion } from 'framer-motion'
import { FiAward, FiArrowRight } from 'react-icons/fi'
import { useMutuelles } from '../hooks/useMutuelles'
import MutuelleCard, { LogoMutuelle } from './MutuelleCard'

const medals = ['🏆', '🥈', '🥉']

function TopCard({ mutuelle, index }) {
  const isFirst = index === 0

  return (
    <div
      className={`relative flex flex-col rounded-3xl border-2 p-6 transition-all hover:shadow-xl hover:-translate-y-1 cursor-pointer ${
        isFirst
          ? 'border-[#9CCC8A]/50 bg-gradient-to-b from-[#9CCC8A]/5 to-white shadow-lg shadow-[#9CCC8A]/20'
          : 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
      }`}
    >
      {/* Badge meilleur choix */}
      {mutuelle.meilleurChoix && (
        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[#9CCC8A] text-white text-[11px] font-extrabold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
          ⭐ Meilleur Choix 2026
        </div>
      )}

      <div className="flex items-start justify-between mb-5 mt-1">
        {/* Logo (favicon ou initiales) */}
        <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-lg" />

        {/* Médaille */}
        <span className="text-2xl">{medals[index]}</span>
      </div>

      <div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.nom}</div>
      <div className="text-xs text-slate-500 mb-4">{mutuelle.slogan}</div>

      {/* Tags */}
      <div className="flex gap-1.5 flex-wrap mb-5">
        {mutuelle.tags.map((tag) => (
          <span
            key={tag}
            className="text-[11px] font-medium px-2 py-0.5 rounded-full"
            style={{ backgroundColor: `${mutuelle.couleur}18`, color: mutuelle.couleur }}
          >
            {tag}
          </span>
        ))}
      </div>

      {/* Promo */}
      {mutuelle.promo && (
        <div className="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold text-center py-2 rounded-xl">
          🎁 {mutuelle.promo}
        </div>
      )}

      {/* Score + CTA */}
      <div className="flex items-end justify-between mt-auto pt-4 border-t border-slate-100">
        <div>
          <div className="text-3xl font-extrabold" style={{ color: mutuelle.couleur }}>
            {mutuelle.score}
            <span className="text-sm font-medium text-slate-400"> /10</span>
          </div>
          <div className="text-[10px] text-slate-400 font-medium mt-0.5">Score Mon Gaston</div>
        </div>
        <a
          href={mutuelle.lien}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1.5 text-sm font-bold text-white px-4 py-2 rounded-xl hover:opacity-90 transition-opacity shadow-md"
          style={{ backgroundColor: mutuelle.couleur }}
        >
          Voir l'offre <FiArrowRight size={13} />
        </a>
      </div>
    </div>
  )
}

function LoadingSkeleton() {
  return (
    <div className="animate-pulse space-y-4">
      <div className="grid md:grid-cols-3 gap-6">
        {[1, 2, 3].map((i) => (
          <div key={i} className="h-64 bg-slate-100 rounded-3xl" />
        ))}
      </div>
      <div className="space-y-3 mt-14">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} className="h-20 bg-slate-100 rounded-2xl" />
        ))}
      </div>
    </div>
  )
}

export default function ComparisonSection() {
  const { mutuelles, loading, error } = useMutuelles()

  return (
    <section id="classement" className="pt-10 pb-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Header */}
        <div className="text-center mb-14">
          <div className="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700 text-xs font-bold px-3 py-1.5 rounded-full mb-5">
            <FiAward size={13} />
            Classement officiel 2026
          </div>
          <h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
            Les meilleures mutuelles santé
          </h2>
          <p className="text-slate-500 max-w-xl mx-auto leading-relaxed">
            Classement mis à jour chaque mois — basé sur les garanties, les tarifs
            et les avis clients de plus de 186 mutuelles analysées.
          </p>
        </div>

        {/* Erreur */}
        {error && (
          <div className="text-center text-red-500 py-10">{error}</div>
        )}

        {/* Chargement */}
        {loading && !error && <LoadingSkeleton />}

        {/* Contenu */}
        {!loading && !error && (
          <>
            {/* Top 3 */}
            <div className="grid md:grid-cols-3 gap-6 mb-14">
              {mutuelles.slice(0, 3).map((m, i) => (
                <motion.div
                  key={m.rang}
                  initial={{ opacity: 0, y: 24 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1, duration: 0.45 }}
                >
                  <TopCard mutuelle={m} index={i} />
                </motion.div>
              ))}
            </div>

            {/* Séparateur */}
            <div className="flex items-center gap-4 mb-8">
              <div className="flex-1 h-px bg-slate-100" />
              <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
                Classement complet
              </span>
              <div className="flex-1 h-px bg-slate-100" />
            </div>

            {/* Liste complète */}
            <div className="space-y-3">
              {mutuelles.map((m, i) => (
                <motion.div
                  key={m.rang}
                  initial={{ opacity: 0, x: -16 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.06, duration: 0.4 }}
                >
                  <MutuelleCard mutuelle={m} />
                </motion.div>
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  )
}
