interface InfoPanelProps {
  onClose: () => void;
}

export function InfoPanel({ onClose }: InfoPanelProps) {
  return (
    <>
      {/* Overlay */}
      <div
        className="fixed inset-0 z-[2000] bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modale */}
      <div className="fixed z-[2001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(520px,calc(100vw-2rem))] max-h-[80vh] overflow-y-auto rounded-2xl bg-[#0f1016] border border-[#2e2f3a] shadow-2xl">

        {/* En-tête */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-[#2e2f3a] sticky top-0 bg-[#0f1016] z-10">
          <div>
            <h2 className="text-[#d4a843] font-semibold text-base">Ğ1Flux</h2>
            <p className="text-[#6b7280] text-xs mt-0.5">Explorateur de transactions Ğ1v2</p>
          </div>
          <button
            onClick={onClose}
            className="text-[#4b5563] hover:text-white text-xl leading-none p-1"
            aria-label="Fermer"
          >
            ✕
          </button>
        </div>

        {/* Contenu */}
        <div className="px-5 py-4 flex flex-col gap-5 text-sm">

          <Section title="Vues cartographiques">
            <Feature icon="🌡" name="Heatmap">
              Densité des transactions géolocalisées. Les zones chaudes concentrent le plus d'activité.
              Basculer avec le bouton <Kbd>Heatmap / Flux</Kbd>.
            </Feature>
            <Feature icon="⟿" name="Flux">
              Arcs entre villes représentant les flux de Ğ1. L'épaisseur indique le volume,
              la couleur la direction dominante.
            </Feature>
          </Section>

          <Section title="Clusters & villes (vue Flux)">
            <Feature icon="⬡" name="Mode Clusters">
              Les villes géographiquement proches sont regroupées en un nœud unique.
              Le chiffre affiché indique le nombre de villes dans le groupe.
            </Feature>
            <Feature icon="·" name="Mode Villes">
              Chaque ville est affichée individuellement, sans regroupement.
              Basculer avec le bouton <Kbd>⬡ Clusters / · Villes</Kbd> (bas gauche de la carte).
            </Feature>
            <Feature icon="●" name="Couleur des nœuds">
              <span className="text-green-400">Vert</span> = receveur net (reçoit plus que ce qu'il émet) ·{' '}
              <span className="text-[#d4a843]">Or</span> = équilibré (dégradé or → vert selon l'excédent reçu) ·{' '}
              <span className="text-[#e53935]">Rouge</span> = émetteur net (dégradé or → rouge selon l'excédent émis).
            </Feature>
            <Feature icon="↗" name="Clic sur un nœud">
              Affiche la liste des villes du cluster avec leur balance individuelle,
              triée par valeur absolue.
            </Feature>
          </Section>

          <Section title="Période">
            <Feature icon="📅" name="Préréglages">
              <Kbd>24h</Kbd> <Kbd>7 jours</Kbd> <Kbd>30 jours</Kbd> — fenêtre glissante jusqu'à maintenant.
            </Feature>
            <Feature icon="✎" name="Personnaliser">
              Saisir une durée de 1 à 365 jours.
            </Feature>
          </Section>

          <Section title="Animation">
            <Feature icon="▶" name="Animer">
              Rejoue les transactions frame par frame sur la période sélectionnée
              (une frame = une journée).
            </Feature>
            <Feature icon="⏩" name="Contrôles">
              Lecture / pause · Navigation frame par frame (<Kbd>◀◀</Kbd> <Kbd>▶▶</Kbd>) ·
              Vitesse <Kbd>×1</Kbd> <Kbd>×2</Kbd> <Kbd>×4</Kbd>.
            </Feature>
          </Section>

          <Section title="Raccourcis clavier">
            <Feature icon="⌨" name="Navigation animation">
              <Kbd>←</Kbd> <Kbd>→</Kbd> frame précédente / suivante ·
              <Kbd>Espace</Kbd> lecture / pause.
            </Feature>
            <Feature icon="⌨" name="Vues & panneaux">
              <Kbd>H</Kbd> basculer Heatmap ↔ Flux ·
              <Kbd>Échap</Kbd> quitter l'animation ou fermer ce panneau.
            </Feature>
          </Section>

          <Section title="Recherche">
            <Feature icon="⌕" name="Identité ou clé Ğ1">
              Le bouton <Kbd>⌕</Kbd> (à gauche de la carte) accepte un nom d'identité Ğ1
              (ex : "Alice") ou une clé publique <Kbd>g1…</Kbd>.
              Il bascule automatiquement en vue Flux et met la ville en focus.
            </Feature>
          </Section>

          <Section title="URL partageable">
            <Feature icon="🔗" name="Deep link">
              L'URL reflète l'état courant : période, vue, ville sélectionnée.
              Partager l'URL restitue exactement la même configuration.
              Exemple : <span className="font-mono text-[#d4a843] text-xs">?period=30&view=flow&city=Paris</span>
            </Feature>
          </Section>

          <Section title="Statistiques">
            <Feature icon="📊" name="Panneau latéral">
              Volume total en Ğ1, nombre de transactions, top émetteurs et receveurs,
              répartition géographique. Se met à jour en temps réel et pendant l'animation.
            </Feature>
            <Feature icon="▂▅█" name="Sparkline">
              Mini-graphique d'activité journalière affiché sous la période,
              calculé depuis les timestamps déjà en mémoire.
            </Feature>
            <Feature icon="☰" name="Mobile">
              Le panneau est accessible via le bouton <Kbd>☰</Kbd> en haut à gauche.
            </Feature>
            <Feature icon="%" name="% Tx géoloc.">
              Pourcentage des transactions ayant une géolocalisation connue sur la période / frame courante.
            </Feature>
          </Section>

          <Section title="Nature des échanges">
            <Feature icon="🏷" name="Catégorisation automatique">
              Le commentaire de chaque transaction est analysé et classé en catégories :
              don & gratitude, alimentation, soin & bien-être, vêtements, culture & loisirs,
              événement, service & travaux, remboursement.
            </Feature>
            <Feature icon="▬" name="Distribution dans le panneau">
              La section <em>Nature des échanges</em> en bas du panneau latéral affiche
              la répartition des catégories sous forme de barres proportionnelles
              sur les transactions commentées de la période courante.
            </Feature>
            <Feature icon="⟿" name="Tooltip sur les arcs (vue Flux)">
              Survoler un arc affiche la distribution des catégories et un échantillon
              de commentaires bruts pour ce corridor.
            </Feature>
          </Section>

          <Section title="Overlay Dividende Universel">
            <Feature icon="DU" name="Membres actifs géolocalisés">
              Le bouton <Kbd>DU</Kbd> (à gauche de la carte) affiche en overlay les membres Ğ1
              actifs (WoT) ayant un profil Cesium+ géolocalisé.
              Chaque point représente une ville avec des membres actifs.
            </Feature>
          </Section>

          <Section title="Source de données">
            <Feature icon="●" name="Live Ğ1v2">
              Données temps réel de la blockchain Ğ1v2 via SubSquid, actualisées toutes les 30 secondes.
              Les profils de géolocalisation sont fournis par Cesium+.
            </Feature>
            <Feature icon="●" name="Statut des services">
              Deux indicateurs en bas du panneau latéral affichent l'état de SubSquid et Cesium+ en temps réel
              (<span className="text-emerald-400">vert</span> OK ·{' '}
              <span className="text-amber-400">jaune</span> lent ·{' '}
              <span className="text-red-400">rouge</span> inaccessible).
              Un clic sur un indicateur permet de configurer ou changer l'endpoint.
            </Feature>
          </Section>

        </div>
      </div>
    </>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <h3 className="text-[#d4a843] text-xs font-semibold uppercase tracking-wider mb-2">{title}</h3>
      <div className="flex flex-col gap-2">{children}</div>
    </div>
  );
}

function Feature({ icon, name, children }: { icon: string; name: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-2">
      <span className="text-[#4b5563] w-5 shrink-0 text-center leading-5 mt-0.5">{icon}</span>
      <div>
        <span className="text-white font-medium">{name}</span>
        <span className="text-[#6b7280]"> — </span>
        <span className="text-[#9ca3af]">{children}</span>
      </div>
    </div>
  );
}

function Kbd({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-block bg-[#1a1b23] border border-[#2e2f3a] rounded px-1 py-0.5 text-[11px] text-[#d4a843] font-mono leading-none">
      {children}
    </span>
  );
}