// FOOTPASS v2 · Portail d'entrée : joué UNE SEULE FOIS, juste après l'onboarding.
// Mode 'verify' : écran unique de fin de certification · la carte Pass ID EST la récompense.
// Mode 'enter'  : retour dans le cercle (logomark + accès vérifié).
const { useState: useStateW, useEffect: useEffectW } = React;

// Cibles de partage · feuille traditionnelle (effet boule de neige)
const SHARE_APPS = [
  { label: 'WhatsApp', bg: '#25D366', icon: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 00-7.7 13.6L3 21l4.5-1.2A9 9 0 1012 3z" stroke="currentColor" strokeWidth="1.7"></path><path d="M8.8 8.2c.2-.5.4-.5.7-.5h.5c.2 0 .4 0 .6.5l.7 1.6c.1.2 0 .4-.1.5l-.4.5c-.1.2-.2.3-.1.5.3.6 1.4 1.8 2.4 2.2.2.1.4.1.5-.1l.5-.6c.1-.2.3-.2.5-.1l1.5.8c.3.1.4.3.4.5 0 .6-.7 1.4-1.2 1.5-.4.1-1 .2-3-.7-2.4-1-3.9-3.6-4-3.8-.1-.2-.9-1.3-.9-2.4 0-1.1.6-1.6.8-1.8z" fill="currentColor"></path></svg>
  ) },
  { label: 'Messages', bg: '#34C759', icon: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 4c-4.4 0-8 2.9-8 6.5 0 1.9 1 3.6 2.6 4.8-.2 1-.7 2-1.4 2.7 1.2 0 2.4-.4 3.4-1 1 .3 2.2.5 3.4.5 4.4 0 8-2.9 8-6.5S16.4 4 12 4z" fill="currentColor"></path></svg>
  ) },
  { label: 'Mail', bg: '#1F8AF0', icon: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="3" y="5.5" width="18" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.7"></rect><path d="M4 7l8 5.5L20 7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"></path></svg>
  ) },
  { label: 'Telegram', bg: '#28A8E9', icon: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M20.5 4.5L3.8 11c-.9.3-.9 1.2 0 1.5l4 1.3 1.6 4.9c.2.6.6.7 1.1.3l2.3-2.1 4.2 3.1c.5.4 1.1.2 1.3-.5l2.9-13.4c.2-.9-.4-1.4-1.2-1.1z" fill="currentColor"></path><path d="M8 13.5l8.5-5.2-6.9 6.4" stroke="#28A8E9" strokeWidth="1" strokeLinejoin="round"></path></svg>
  ) },
  { label: 'Copier le lien', bg: 'rgba(255,255,255,0.12)', fg: '#E8C96A', icon: (
    <svg width="19" height="19" viewBox="0 0 24 24" fill="none"><path d="M9.5 14.5l5-5M8 10l-1.5 1.5a3.5 3.5 0 005 5L13 15M16 14l1.5-1.5a3.5 3.5 0 00-5-5L11 9" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"></path></svg>
  ) },
  { label: 'Plus', bg: 'rgba(255,255,255,0.12)', fg: '#E4E4E7', icon: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="6" cy="12" r="1.6" fill="currentColor"></circle><circle cx="12" cy="12" r="1.6" fill="currentColor"></circle><circle cx="18" cy="12" r="1.6" fill="currentColor"></circle></svg>
  ) },
];

function FPWelcomeGate({ name, role, org, photo, mode = 'enter', onDone }) {
  const full = (name || FP_ME.name || 'Alexandre Da Costa').trim();
  const first = full.split(/\s+/)[0];
  const verify = mode === 'verify';
  // beat: 'seal' → 'open' → 'welcome' → 'exit'
  const [beat, setBeat] = useStateW('seal');
  const [shareOpen, setShareOpen] = useStateW(false);
  const finish = () => {
    setBeat('exit');
    setTimeout(() => onDone && onDone(), 620);
  };
  const shareTxt = `${full} · Pass ID vérifié sur FOOTPASS®. Rejoignez le réseau vérifié du football : https://footpass.app/i/adacosta`;
  const onPick = (label) => {
    setShareOpen(false);
    try { navigator.clipboard && navigator.clipboard.writeText(shareTxt); } catch (e) {}
    if (typeof showToast === 'function') showToast(label === 'Copier le lien' ? 'Lien Pass ID copié' : 'Pass ID partagé via ' + label);
  };
  useEffectW(() => {
    if (verify) {
      // Brève émission du Pass, puis la carte se révèle
      const t = setTimeout(() => setBeat('welcome'), 1050);
      return () => clearTimeout(t);
    }
    const t1 = setTimeout(() => setBeat('open'), 1250);
    const t2 = setTimeout(() => setBeat('welcome'), 2150);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  const CheckIc = () => (
    <svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M2.5 7.5L5.5 10.5L11.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
    </svg>
  );

  // ═══════ MODE VÉRIFICATION · écran unique, carte = récompense ═══════
  if (verify) {
    return (
      <div className={`wg wg-verify beat-${beat}`} onClick={beat === 'welcome' ? finish : undefined} data-screen-label="Certification · Pass ID activé">
        <div className="wg-bg"></div>
        <div className="wg-grid"></div>
        <div className="wg-vlogo" role="img" aria-label="FOOTPASS®"></div>

        {beat !== 'welcome' && beat !== 'exit' ? (
          <div className="wg-gen">
            <span className="wg-gen-ring"></span>
            <span className="wg-gen-label">{TX('Émission de votre Pass ID…')}</span>
          </div>
        ) : (
          <div className="wg-vwrap">
            <div className="wg-vkicker">{TX('PASSEPORT NUMÉRIQUE DU FOOTBALL')}</div>
            <h1 className="wg-title">{TX('Pass ID vérifié')}</h1>
            <p className="wg-sub">{TX('Votre identité a été vérifiée avec succès. Vous pouvez désormais échanger sur FOOTPASS® avec une identité certifiée et un rôle reconnu.')}</p>

            <div className="wg-cardhero">
              <span className="wg-cardglow"></span>
              <span className="wg-certpulse"></span>
              <div className="wg-card"><ObPassCard name={full} role={role} org={org} photo={photo} verified gold shimmer /></div>
            </div>

            <div className="wg-checklist">
              <span className="wg-check"><i className="wg-check-ic"><CheckIc /></i>{TX('Identité vérifiée')}</span>
              <span className="wg-check"><i className="wg-check-ic"><CheckIc /></i>{TX('Rôle certifié')}</span>
              <span className="wg-check"><i className="wg-check-ic"><CheckIc /></i>{TX('Documents protégés')}</span>
              <span className="wg-check"><i className="wg-check-ic"><CheckIc /></i>{TX('Échanges sécurisés')}</span>
            </div>
          </div>
        )}

        <button className="wg-share" onClick={(e) => { e.stopPropagation(); setShareOpen(true); }}>
          <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M11 5.5a2 2 0 10-1.9-2.6L6.3 4.6a2 2 0 100 2.8l2.8 1.7A2 2 0 1011 7.3L8.2 5.6c.04-.2.04-.4 0-.6L11 3.3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"></path>
          </svg>
          {TX('Partager mon Pass ID')}
        </button>
        <button className="wg-enter" onClick={(e) => { e.stopPropagation(); finish(); }}>{TX('Entrer dans FOOTPASS')}</button>
        <div className="wg-hint">{TX('Seul votre Pass ID est visible par les autres membres. Vos documents restent privés.')}</div>

        {shareOpen ? (
          <div className="wgsh" onClick={(e) => e.stopPropagation()}>
            <div className="wgsh-scrim" onClick={() => setShareOpen(false)}></div>
            <div className="wgsh-sheet">
              <div className="wgsh-grab"></div>
              <div className="wgsh-prev">
                <div className="wgsh-prevcard"><ObPassCard name={full} role={role} org={org} photo={photo} verified gold /></div>
                <div className="wgsh-prevtxt">
                  <b>{full}</b>
                  <em><OBI.Check s={11} c="currentColor" /> {TX('Pass ID vérifié · FOOTPASS®')}</em>
                </div>
              </div>
              <div className="wgsh-label">{TX('Partager via')}</div>
              <div className="wgsh-apps">
                {SHARE_APPS.map((a) => (
                  <button key={a.label} className="wgsh-app" onClick={() => onPick(a.label)}>
                    <span className="wgsh-ic" style={{ background: a.bg, color: a.fg || '#fff' }}>{a.icon}</span>
                    <span className="wgsh-applbl">{TX(a.label)}</span>
                  </button>
                ))}
              </div>
              <div className="wgsh-snow">
                <span className="wgsh-snow-ic"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="12" cy="4" r="2" stroke="currentColor" strokeWidth="1.4"></circle><circle cx="4" cy="8" r="2" stroke="currentColor" strokeWidth="1.4"></circle><circle cx="12" cy="12" r="2" stroke="currentColor" strokeWidth="1.4"></circle><path d="M10.2 5L5.8 7M5.8 9L10.2 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"></path></svg></span>
                <span className="wgsh-snow-txt">{TX('Partagez votre Pass ID pour rassurer vos contacts et leur permettre de rejoindre FOOTPASS®.')}</span>
              </div>
              <button className="wgsh-cancel" onClick={() => setShareOpen(false)}>{TX('Annuler')}</button>
            </div>
          </div>
        ) : null}
      </div>
    );
  }

  // ═══════ MODE ENTRÉE · retour dans le cercle ═══════
  return (
    <div className={`wg beat-${beat}`} onClick={finish} data-screen-label="Entrée FOOTPASS">
      <div className="wg-bg"></div>
      <div className="wg-grid"></div>

      <div className="wg-stage">
        <span className="wg-ring r1"></span>
        <span className="wg-ring r2"></span>
        <span className="wg-ring r3"></span>
        <span className="wg-sweep"></span>
        <div className="wg-emblem">
          <img className="wg-mark" src="assets/logomark_white.png" alt="FOOTPASS®" />
          <span className="wg-lock">
            <svg className="wg-lock-closed" width="15" height="15" viewBox="0 0 16 16" fill="none">
              <rect x="3" y="7" width="10" height="7" rx="2" stroke="currentColor" strokeWidth="1.5"></rect>
              <path d="M5 7V5a3 3 0 016 0v2" stroke="currentColor" strokeWidth="1.5"></path>
            </svg>
            <svg className="wg-lock-open" width="15" height="15" viewBox="0 0 16 16" fill="none">
              <path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"></path>
            </svg>
          </span>
        </div>
      </div>

      <div className="wg-copy">
        <div className="wg-kicker">
          <span className="wg-status-seal">{TX('AUTHENTIFICATION DE L’IDENTITÉ…')}</span>
          <span className="wg-status-open">{TX('ACCÈS VÉRIFIÉ · SÉCURISÉ')}</span>
        </div>
        <h1 className="wg-title">{TX('Bienvenue dans le cercle,')}<br /><b>{first}</b></h1>
        <p className="wg-sub">{TX('Vous faites désormais partie du réseau privé et vérifié du football mondial.')}</p>
        <div className="wg-badges">
          <span className="wg-badge"><FPIcon.Shield s={11} c="currentColor" /> {TX('Membre vérifié')}</span>
          <span className="wg-badge"><svg width="11" height="11" viewBox="0 0 14 14" fill="none"><rect x="2.4" y="6" width="9.2" height="6.2" rx="1.6" stroke="currentColor" strokeWidth="1.3"></rect><path d="M4.5 6V4.6a2.5 2.5 0 015 0V6" stroke="currentColor" strokeWidth="1.3"></path></svg> {TX('Chiffré E2E')}</span>
        </div>
      </div>

      <button className="wg-enter" onClick={(e) => { e.stopPropagation(); finish(); }}>{TX('Découvrir mon espace')}</button>
      <div className="wg-hint">{TX('Touchez pour continuer')}</div>
    </div>
  );
}

Object.assign(window, { FPWelcomeGate });