import { useState } from 'react'
import { FiArrowRight, FiActivity, FiEye, FiSmile } from 'react-icons/fi'

// Favicon auto-chargé depuis le lien, fallback sur les initiales
export function LogoMutuelle({ mutuelle, className = '' }) {
  const [faviconError, setFaviconError] = useState(false)

  const faviconUrl =
    mutuelle.lien && !faviconError
      ? `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(mutuelle.lien)}`
      : null

  return (
    <div
      className={`rounded-2xl flex items-center justify-center font-extrabold text-white flex-shrink-0 shadow-md overflow-hidden ${className}`}
      style={{ backgroundColor: faviconUrl ? 'transparent' : mutuelle.couleur }}
    >
      {faviconUrl ? (
        <img
          src={faviconUrl}
          alt=""
          className="w-full h-full object-contain"
          onError={() => setFaviconError(true)}
        />
      ) : (
        <span>{mutuelle.initiales}</span>
      )}
    </div>
  )
}

function FeatureDots({ count }) {
  return (
    <div className="flex gap-1">
      {[1, 2, 3].map((i) => (
        <div
          key={i}
          className={`w-2.5 h-2.5 rounded-full transition-colors ${
            i <= count ? 'bg-[#9CCC8A]' : 'bg-slate-200'
          }`}
        />
      ))}
    </div>
  )
}

function ScoreBar({ score, color }) {
  return (
    <div className="flex flex-col items-center gap-1 min-w-[64px]">
      <div className="text-xl font-extrabold" style={{ color }}>
        {score}
      </div>
      <div className="w-14 h-1.5 bg-slate-100 rounded-full overflow-hidden">
        <div
          className="h-full rounded-full"
          style={{ width: `${(score / 10) * 100}%`, backgroundColor: color }}
        />
      </div>
      <div className="text-[10px] text-slate-400 font-medium whitespace-nowrap">
        Score Mon Gaston
      </div>
    </div>
  )
}

export default function MutuelleCard({ mutuelle }) {
  const isFirst = mutuelle.rang === 1

  return (
    <div
      className={`bg-white rounded-2xl border transition-all hover:shadow-lg hover:-translate-y-0.5 p-5 flex items-center gap-4 ${
        isFirst
          ? 'border-[#9CCC8A]/40 shadow-md ring-1 ring-[#9CCC8A]/20'
          : 'border-slate-100 hover:border-slate-200'
      }`}
    >
      {/* Rang */}
      <div
        className={`w-8 h-8 rounded-xl flex items-center justify-center text-sm font-bold flex-shrink-0 ${
          isFirst ? 'bg-[#9CCC8A] text-white shadow-md shadow-[#9CCC8A]/40' : 'bg-slate-100 text-slate-500'
        }`}
      >
        {mutuelle.rang}
      </div>

      {/* Logo (favicon ou initiales) */}
      <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-sm" />

      {/* Nom + tags */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap mb-1">
          <span className="font-bold text-slate-900 truncate">{mutuelle.nom}</span>
          {mutuelle.meilleurChoix && (
            <span className="bg-amber-50 text-amber-600 border border-amber-200 text-[10px] font-extrabold px-2 py-0.5 rounded-full whitespace-nowrap">
              ⭐ Meilleur Choix
            </span>
          )}
        </div>
        <div className="flex items-center gap-1.5 flex-wrap">
          {mutuelle.tags.map((tag) => (
            <span
              key={tag}
              className="text-[11px] font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>

      {/* Points de couverture */}
      <div className="hidden md:flex flex-col gap-2 flex-shrink-0">
        <div className="flex items-center gap-2">
          <FiActivity className="text-slate-300 text-xs flex-shrink-0" />
          <span className="text-[11px] text-slate-500 w-12">Soins</span>
          <FeatureDots count={mutuelle.couvertures.soins} />
        </div>
        <div className="flex items-center gap-2">
          <FiSmile className="text-slate-300 text-xs flex-shrink-0" />
          <span className="text-[11px] text-slate-500 w-12">Dentaire</span>
          <FeatureDots count={mutuelle.couvertures.dentaire} />
        </div>
        <div className="flex items-center gap-2">
          <FiEye className="text-slate-300 text-xs flex-shrink-0" />
          <span className="text-[11px] text-slate-500 w-12">Optique</span>
          <FeatureDots count={mutuelle.couvertures.optique} />
        </div>
      </div>

      {/* Score */}
      <div className="hidden lg:block flex-shrink-0">
        <ScoreBar score={mutuelle.score} color={mutuelle.couleur} />
      </div>

      {/* CTA */}
      <a
        href={mutuelle.lien}
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center gap-2 text-white font-bold text-sm px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
        style={{ backgroundColor: mutuelle.couleur }}
      >
        Voir l'offre
        <FiArrowRight />
      </a>
    </div>
  )
}
