// Encryption info modal — pédagogique, animé, montre le flux zero-knowledge.

const EncryptionModal = ({ open, onClose }) => {
  const [step, setStep] = React.useState(0);
  const [autoplay, setAutoplay] = React.useState(true);

  React.useEffect(() => {
    if (!open) { setStep(0); setAutoplay(true); return; }
    if (!autoplay) return;
    const t = setInterval(() => setStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(t);
  }, [open, autoplay]);

  if (!open) return null;

  return (
    <div className="cp-modal-bg" onClick={onClose}>
      <div className="cp-modal" onClick={(e) => e.stopPropagation()}>
        <button className="cp-modal-x" onClick={onClose}>✕</button>

        <div className="cp-modal-head">
          <div className="cp-modal-badge">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <defs>
                <linearGradient id="mlg" x1="0" x2="1" y1="0" y2="1">
                  <stop offset="0" stopColor="#6366F1"/>
                  <stop offset="1" stopColor="#EC4899"/>
                </linearGradient>
              </defs>
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="url(#mlg)" strokeWidth="1.6"/>
              <path d="m9 12 2 2 4-4" stroke="url(#mlg)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <h2>Chiffrement de bout en bout</h2>
            <p>Vos données sont illisibles, même pour nous.</p>
          </div>
        </div>

        <div className="cp-flow" onClick={() => setAutoplay(false)}>
          <div className="cp-flow-stages">
            <Stage active={step === 0} icon="key" title="Mot de passe maître" sub="Jamais transmis" tone="indigo" />
            <Arrow active={step >= 1} label="Argon2id" />
            <Stage active={step === 1} icon="sparkle" title="Clé dérivée" sub="64 octets, locale" tone="rose" />
            <Arrow active={step >= 2} label="AES-256-GCM" />
            <Stage active={step === 2} icon="lock" title="Données chiffrées" sub="Côté client" tone="emerald" />
            <Arrow active={step >= 3} label="HTTPS / TLS 1.3" />
            <Stage active={step === 3} icon="cloud" title="Serveur" sub="Voit du chiffré" tone="slate" />
          </div>

          <div className="cp-flow-dots">
            {[0,1,2,3].map(i => (
              <button key={i} className={i === step ? 'is-on' : ''} onClick={() => { setAutoplay(false); setStep(i); }} />
            ))}
          </div>

          <div className="cp-flow-explainer">
            {step === 0 && (
              <p>Votre <b>mot de passe maître</b> reste sur votre appareil. Il ne quitte jamais votre navigateur — pas même chiffré.</p>
            )}
            {step === 1 && (
              <p><b>Argon2id</b> (lauréat de la Password Hashing Competition) le transforme en clé robuste, résistante aux GPU et ASIC. Paramètres : t=3, m=64 Mo, p=1.</p>
            )}
            {step === 2 && (
              <p>Vos mots de passe sont chiffrés <b>localement</b> avec AES-256-GCM. Chaque entrée a son propre IV. Authentification intégrée.</p>
            )}
            {step === 3 && (
              <p>Le serveur ne reçoit que des <b>blobs chiffrés</b>. Une faille de notre BDD ne révélerait que du bruit. C'est le principe <b>zero-knowledge</b>.</p>
            )}
          </div>
        </div>

        <div className="cp-pillars">
          <Pillar title="Zero-knowledge" desc="Personne chez nous ne peut lire vos données." />
          <Pillar title="Open-source" desc="Le code de chiffrement est public et auditable." />
          <Pillar title="Audit annuel" desc="Cryptanalyse externe par Trail of Bits." />
        </div>
      </div>
    </div>
  );
};

const stageTone = {
  indigo:  { bg: 'rgba(99,102,241,.15)',  fg: '#A5B4FC' },
  rose:    { bg: 'rgba(236,72,153,.15)',  fg: '#F9A8D4' },
  emerald: { bg: 'rgba(16,185,129,.15)',  fg: '#6EE7B7' },
  slate:   { bg: 'rgba(148,163,184,.15)', fg: '#CBD5E1' },
};

const Stage = ({ active, icon, title, sub, tone }) => {
  const t = stageTone[tone];
  return (
    <div className={`cp-stage ${active ? 'is-active' : ''}`}>
      <div className="cp-stage-ico" style={{ background: t.bg, color: t.fg, boxShadow: active ? `0 0 0 3px ${t.bg}` : 'none' }}>
        {icon === 'cloud' ? (
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M17 18a4 4 0 0 0 0-8 6 6 0 0 0-11.5 1.5A4 4 0 0 0 6 18z"/>
          </svg>
        ) : (
          <Icon name={icon} size={18} />
        )}
      </div>
      <div className="cp-stage-title">{title}</div>
      <div className="cp-stage-sub">{sub}</div>
    </div>
  );
};

const Arrow = ({ active, label }) => (
  <div className={`cp-arrow ${active ? 'is-active' : ''}`}>
    <span className="cp-arrow-label">{label}</span>
    <svg width="100%" height="6" viewBox="0 0 100 6" preserveAspectRatio="none">
      <line x1="0" y1="3" x2="100" y2="3" stroke="rgba(255,255,255,.1)" strokeWidth="1.5" strokeDasharray="3 3" />
      <line x1="0" y1="3" x2="100" y2="3" stroke="url(#arrg)" strokeWidth="1.5"
            strokeDasharray="100" strokeDashoffset={active ? 0 : 100}
            style={{ transition: 'stroke-dashoffset .6s ease-out' }} />
      <defs>
        <linearGradient id="arrg" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#6366F1"/>
          <stop offset="1" stopColor="#EC4899"/>
        </linearGradient>
      </defs>
    </svg>
  </div>
);

const Pillar = ({ title, desc }) => (
  <div className="cp-pillar">
    <div className="cp-pillar-title">
      <Icon name="check" size={11} color="#10B981" />
      <span>{title}</span>
    </div>
    <div className="cp-pillar-desc">{desc}</div>
  </div>
);

window.EncryptionModal = EncryptionModal;