// FOOTPASS v2 · sous-pages 2/2 : Réglages, Notifications, Aide
// + feuilles : nouveau message, nouvel appel, événement (détail + création), fiche contact
const { useState: useStateQ } = React;

// ═══════ RÉGLAGES ═══════
function SettingsPage({ onBack, showToast, appearance }) {
  const ap = appearance || {};
  const [sec, setSec] = useStateQ({ twofa: true, faceid: true, notifs: true, loc: false, reads: true });
  const flip = (k) => setSec((p) => ({ ...p, [k]: !p[k] }));
  const [delStep, setDelStep] = useStateQ(0);
  const [subSheet, setSubSheet] = useStateQ(false);
  const [photoSheet, setPhotoSheet] = useStateQ(false);
  const [avatar, setAvatar] = useStateQ((window.FP_ME && FP_ME.photo) || 'assets/alex-avatar.png');
  const PhotoSheet = window.FpPhotoSheet;
  React.useEffect(() => {
    const f = () => setPhotoSheet(true);
    window.addEventListener('fp:editphoto', f);
    return () => window.removeEventListener('fp:editphoto', f);
  }, []);
  const subState = (() => { try { return localStorage.getItem('fp_sub_state') || 'trial'; } catch (e) { return 'trial'; } })();
  return (
    <PgPage title="Réglages" onBack={onBack}>
      <div className="hm-sechead"><span>{TX('Compte')}</span></div>
      <div className="pg-info">
        <div className="pg-inforow">
          <span>{TX('Photo de profil')}</span>
          <button className="pg-photoedit" onClick={() => setPhotoSheet(true)}>
            <img className="pg-avatarthumb" src={avatar} alt="" />
            <span className="pg-headact" style={{ padding: 0 }}>{TX('Modifier')}</span>
          </button>
        </div>
        <div className="pg-inforow"><span>{TX('Titulaire')}</span><b>{window.fpUpperLast(FP_ME.name)}</b></div>
        <div className="pg-inforow"><span>Email</span><b>{FP_ME.email}</b></div>
        <div className="pg-inforow">
          <span>{TX('Formule')}</span>
          <b>{TX(subState === 'cancelled' ? 'PassPRO · essai annulé' : 'PassPRO · essai jusqu\u2019au 23 juin')}
            <button className="pg-headact" style={{ padding: 0 }} onClick={() => setSubSheet(true)}>{TX('Gérer')}</button>
          </b>
        </div>
      </div>

      <div className="hm-sechead"><span>{TX('Apparence')}</span></div>
      <div className="pg-info">
        <div className="pg-inforow"><span>{TX('Mode sombre (conversation)')}</span><PgToggle on={!!ap.dark} onChange={(v) => ap.setDark && ap.setDark(v)} /></div>
        <div className="pg-inforow">
          <span>{TX('Langue')}</span>
          <span className="pg-seg">
            <button className={ap.lang === 'fr' ? 'on' : ''} onClick={() => ap.setLang && ap.setLang('fr')}>FR</button>
            <button className={ap.lang === 'en' ? 'on' : ''} onClick={() => ap.setLang && ap.setLang('en')}>EN</button>
          </span>
        </div>
      </div>

      <div className="hm-sechead"><span>{TX('Sécurité & confidentialité')}</span></div>
      <div className="pg-info">
        <div className="pg-inforow"><span>{TX('Double authentification')}</span><PgToggle on={sec.twofa} onChange={() => { flip('twofa'); showToast(sec.twofa ? TX('2FA désactivée · déconseillé') : TX('2FA réactivée')); }} /></div>
        <div className="pg-inforow"><span>{TX('Déverrouillage Face ID')}</span><PgToggle on={sec.faceid} onChange={() => flip('faceid')} /></div>
        <div className="pg-inforow"><span>Notifications</span><PgToggle on={sec.notifs} onChange={() => flip('notifs')} /></div>
        <div className="pg-inforow"><span>{TX('Localisation')}</span><PgToggle on={sec.loc} onChange={() => flip('loc')} /></div>
        <div className="pg-inforow"><span>{TX('Confirmations de lecture')}</span><PgToggle on={sec.reads} onChange={() => flip('reads')} /></div>
      </div>

      <div className="hm-sechead"><span>{TX('Données')}</span></div>
      <div className="pg-info">
        <div className="pg-inforow">
          <span>{TX('Exporter mes données')}</span>
          <button className="pg-headact" style={{ padding: 0 }} onClick={() => showToast(TX('Export demandé · lien envoyé par email sous 24 h'))}>{TX('Demander')}</button>
        </div>
      </div>
      <div className="pg-actions single">
        {delStep === 0
          ? <button className="pg-btn danger" onClick={() => setDelStep(1)}>{TX('Supprimer mon compte')}</button>
          : <button className="pg-btn danger" onClick={() => { setDelStep(0); showToast(TX('Demande enregistrée · suppression effective sous 30 jours')); }}>{TX('Confirmer la suppression définitive')}</button>}
      </div>
      {delStep === 1 ? <div className="hm-empty" style={{ paddingTop: 6 }}>{TX('Votre Pass ID, vos autorisations et votre coffre seront détruits. Cette action est irréversible.')}</div> : null}
      {subSheet ? <SubscriptionSheet onClose={() => setSubSheet(false)} showToast={showToast} /> : null}
      {photoSheet && PhotoSheet ? <PhotoSheet onClose={() => { setPhotoSheet(false); setAvatar((window.FP_ME && FP_ME.photo) || avatar); }} showToast={showToast} /> : null}
    </PgPage>
  );
}

// ═══════ ABONNEMENT · portail client in-app (audit 360 · P1-3b) ═══════
// Formule, essai daté, cycle, moyen de paiement, factures, résiliation en un geste · sans quitter l'app.
function SubscriptionSheet({ onClose, showToast }) {
  const read = () => { try { return localStorage.getItem('fp_sub_state') || 'trial'; } catch (e) { return 'trial'; } };
  const [sub, setSubRaw] = useStateQ(read);
  const setSub = (v) => { setSubRaw(v); try { localStorage.setItem('fp_sub_state', v); } catch (e) { /* ignore */ } };
  const [cycle, setCycle] = useStateQ('m');
  const [arm, setArm] = useStateQ(false);
  const st = (window.fpGetStructure && window.fpGetStructure()) || null;
  const cancelled = sub === 'cancelled';
  const mPrice = st ? '19,99' : '29,99';
  return (
    <PgSheet onClose={onClose} title="Abonnement">
      <div className="pg-info">
        <div className="pg-inforow"><span>{TX('Formule')}</span><b>PassPRO</b></div>
        <div className="pg-inforow"><span>{TX('Statut')}</span>{cancelled ? <span className="pg-pill off">{TX('Essai annulé')}</span> : <span className="pg-pill ok">{TX('Essai · 10 jours')}</span>}</div>
        <div className="pg-inforow"><span>{TX('Commencé le')}</span><b>{TX('13 juin 2026')}</b></div>
        {cancelled
          ? <div className="pg-inforow"><span>{TX('Accès jusqu\u2019au')}</span><b>{TX('23 juin 2026')}</b></div>
          : <React.Fragment>
              <div className="pg-inforow"><span>{TX('Rappel par email')}</span><b>{TX('20 juin 2026')}</b></div>
              <div className="pg-inforow"><span>{TX('Premier débit')}</span><b>{TX('23 juin 2026')}</b></div>
            </React.Fragment>}
      </div>
      <div className="hm-sechead"><span>{TX('Facturation')}</span></div>
      <div className="pg-info">
        <div className="pg-inforow">
          <span>{TX('Cycle')}</span>
          <span className="pg-seg">
            <button className={cycle === 'm' ? 'on' : ''} onClick={() => setCycle('m')}>{TX('Mensuel')}</button>
            <button className={cycle === 'y' ? 'on' : ''} onClick={() => setCycle('y')}>{TX('Annuel')}</button>
          </span>
        </div>
        <div className="pg-inforow"><span>{TX('Prix')}</span><b>{cycle === 'y' ? '239,99 CHF/an' + (st ? '' : ' · −33 %') : mPrice + ' CHF/mois'}</b></div>
        {st ? <div className="pg-inforow"><span>{TX('Lié à votre structure')}</span><b className="ok">19,99 {TX('au lieu de')} 29,99</b></div> : null}
        <div className="pg-inforow">
          <span>{TX('Moyen de paiement')}</span>
          <b>Visa •••• 4242 <button className="pg-headact" style={{ padding: 0 }} onClick={() => showToast(TX('Mise à jour de la carte · formulaire sécurisé Stripe'))}>{TX('Modifier')}</button></b>
        </div>
      </div>
      {cycle === 'y' && !st ? <div className="hm-empty" style={{ paddingTop: 6 }}>{TX('239,99 CHF/an, soit 19,99 CHF/mois. Le mensuel reste disponible à tout moment.')}</div> : null}
      <div className="hm-sechead"><span>{TX('Factures')}</span></div>
      <div className="hm-empty" style={{ paddingTop: 2 }}>{TX(cancelled ? 'Aucune facture · et aucun débit à venir.' : 'Aucune facture pendant l\u2019essai. La première sera émise le 23 juin 2026 et apparaîtra ici, exportable en PDF.')}</div>
      <div className="pg-sheet-actions">
        {cancelled
          ? <button className="pg-btn primary" onClick={() => { setSub('trial'); setArm(false); showToast(TX('Abonnement repris · sans interruption')); }}>{TX('Reprendre l\u2019abonnement')}</button>
          : arm
            ? <button className="pg-btn danger" onClick={() => { setSub('cancelled'); setArm(false); showToast(TX('Essai annulé · aucun débit ne sera effectué')); }}>{TX('Confirmer l\u2019annulation')}</button>
            : <button className="pg-btn danger" onClick={() => setArm(true)}>{TX('Annuler l\u2019essai')}</button>}
      </div>
      {arm && !cancelled ? <div className="hm-empty" style={{ paddingTop: 4 }}>{TX('Votre Pass reste utilisable jusqu\u2019au 23 juin. Aucun débit, aucune justification demandée.')}</div> : null}
      <div className="hm-listfoot"><FPIcon.Shield s={10} /> {TX('Hébergé en Suisse · résiliable à tout moment, en un geste')}</div>
    </PgSheet>
  );
}

// ═══════ NOTIFICATIONS ═══════
// En FEUILLE, plus en page : elles glissent au-dessus de l'écran courant · on ne quitte jamais l'app.
const PG_NOTIF_IC = {
  sign: (p) => <HMI.Pen s={15} {...p} />,
  cal: (p) => <HMI.Calendar s={16} {...p} />,
  doc: (p) => <FPIcon.Doc s={14} {...p} />,
  sec: (p) => <FPIcon.Shield s={13} c="currentColor" {...p} />,
};
function NotifsSheet({ onClose, notifs, setNotifs, onOpenChat, showToast }) {
  const [prefs, setPrefs] = useStateQ(false); // Audit R-04 · préférences par rôle
  const unread = notifs.filter((n) => !n.read).length;
  const markAll = () => { setNotifs(notifs.map((n) => ({ ...n, read: true }))); showToast(TX('Tout est lu')); };
  const open = (n) => {
    setNotifs(notifs.map((x) => (x.id === n.id ? { ...x, read: true } : x)));
    if (n.chat) { onClose(); onOpenChat(n.chat); }
  };
  return (
    <PgSheet onClose={onClose} title="Notifications">
      <div className="pg-notif-acts">
        <span className="pg-notif-n">{unread ? unread + TX(' non lues') : TX('Vous êtes à jour')}</span>
        {unread ? <button className="pg-headact" onClick={markAll}>{TX('Tout lire')}</button> : null}
        <button className="pg-headact" onClick={() => setPrefs(true)}>{TX('Préférences')}</button>
      </div>
      <div className="hm-cardlist">
        {notifs.map((n) => {
          const Ic = PG_NOTIF_IC[n.kind] || PG_NOTIF_IC.doc;
          return (
            <button key={n.id} className={`hm-row hm-notif ${n.read ? '' : 'unread'}`} onClick={() => open(n)}>
              <span className="hm-row-ic"><Ic /></span>
              <span className="hm-row-txt"><b>{TX(n.title)}</b><em>{TX(n.sub)}</em></span>
              <span className="hm-time">{TX(n.time)}</span>
            </button>
          );
        })}
      </div>
      {prefs && window.NotifPrefsSheet ? <NotifPrefsSheet onClose={() => setPrefs(false)} /> : null}
    </PgSheet>
  );
}

// ═══════ AIDE & SUPPORT ═══════
// Centre d'aide complet · sections alignées sur footpass.app/faq · recherche instantanée
const PG_FAQ = [
  { s: 'Général', items: [
    { q: 'Quelle différence avec une messagerie classique ?', a: 'Chaque compte est une identité vérifiée. Chaque message porte la légitimité de son auteur · rôle, structure, autorisations. Pas de numéro inconnu, pas d\u2019usurpation : la légitimité n\u2019est pas déclarée, elle est visible.' },
    { q: 'À quoi sert mon Pass ID ?', a: 'C\u2019est votre identité vérifiée dans le football. Chaque membre passe une vérification Veriff (document + biométrie) : vous savez toujours à qui vous parlez.' },
    { q: 'FOOTPASS remplace-t-il ma messagerie personnelle ?', a: 'Non. FOOTPASS structure les échanges professionnels du football : dossiers joueurs, documents, autorisations, agenda. Le reste de votre vie reste où il est.' },
    { q: 'Le football amateur est-il concerné ?', a: 'Oui. PassSTART (9,99 CHF/mois) couvre l\u2019usage amateur et les jeunes, des U17 aux U9 · même app, même vérification, même prix lié ou non à une structure.' },
    { q: 'Comment fonctionne la signature de contrats ?', a: 'Les documents envoyés dans une conversation sont signés avec votre Pass ID, horodatés et archivés dans le coffre-fort des deux parties.' },
  ] },
  { s: 'Confidentialité & sécurité', items: [
    { q: 'Mes conversations sont-elles privées ?', a: 'Oui. Messages, appels et documents sont chiffrés de bout en bout. Personne, pas même FOOTPASS, ne peut les lire.' },
    { q: 'Où sont hébergées mes données ?', a: 'En Suisse, à Zurich. Chiffrement AES-256, clés conservées sur votre appareil, journal inviolable. Vos données ne sont jamais vendues.' },
    { q: 'Qui voit mes autorisations et autorisations ?', a: 'Vous décidez : chaque autorisation est publique (visible des parties concernées) ou privée. Les documents du coffre ont des droits par personne ET par document.' },
    { q: 'Comment révoquer une autorisation ?', a: 'Autorisations → ouvrez l’autorisation → Révoquer. Effet immédiat, notifié aux parties, consigné au journal. Les sous-autorisations dépendantes tombent en cascade.' },
    { q: 'Comment protégez-vous les jeunes joueurs ?', a: 'Les comptes 13–17 ans exigent une autorisation avec un représentant légal, qui garde visibilité et droit de révocation. Tout interlocuteur est vérifié. Aucune publicité ciblée sur les données de mineurs.' },
  ] },
  { s: 'Accès & inscription', items: [
    { q: 'La vérification d\u2019identité est-elle obligatoire ?', a: 'Oui, pour tous. C\u2019est la promesse de la plateforme. Vos documents sont supprimés après vérification · seul votre statut vérifié est visible.' },
    { q: 'Puis-je utiliser FOOTPASS sans structure ?', a: 'Oui. Le compte vous appartient, toujours. Une structure peut vous lier · votre PassPRO passe alors à 19,99 CHF/mois · et la quitter ne change que le prix.' },
    { q: 'Comment une structure rejoint-elle FOOTPASS ?', a: 'Menu → Ma structure → Créer : le palier se calcule sur le staff permanent (dès 499,99 CHF/an, essai 10 jours). Les joueurs ne comptent jamais dans le palier.' },
  ] },
  { s: 'Abonnement', items: [
    { q: 'Comment fonctionne l\u2019essai ?', a: '10 jours, 0 CHF aujourd\u2019hui, sans engagement. Rappel par email 3 jours avant le premier débit. Annulable en un geste, sans justification.' },
    { q: 'Comment annuler mon abonnement ?', a: 'Réglages → Formule → Gérer, puis « Annuler l\u2019essai » : un geste, sans justification. Vos données restent accessibles jusqu\u2019à la fin de la période en cours.' },
    { q: 'Le mensuel est-il toujours possible ?', a: 'Oui, toujours. L\u2019annuel (239,99 CHF pour PassPRO) est proposé, jamais imposé · et le − 33 % ne s\u2019affiche que là où il est vrai.' },
  ] },
  { s: 'Technique & support', items: [
    { q: 'Je perds l\u2019accès à mon compte ?', a: 'Récupération par vérification d\u2019identité · le Pass ID est personnel et incessible. Contactez le support : réponse sous 24 h.' },
    { q: 'Comment fonctionne le coffre-fort ?', a: 'Chaque document appartient à une entité et une catégorie · les dossiers ne stockent rien, ce sont des vues automatiques. Droits par personne : consulter, réviser, signer, partager, exporter (toujours filigrané).' },
  ] },
];
function HelpPage({ onBack, showToast }) {
  const [open, setOpen] = useStateQ(null);
  const [q, setQ] = useStateQ('');
  const norm = (s) => String(s).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
  const match = (f) => !q.trim() || norm(TX(f.q) + ' ' + TX(f.a)).indexOf(norm(q)) >= 0;
  const copy = (txt, msg) => { try { navigator.clipboard && navigator.clipboard.writeText(txt); } catch (e) { /* ignore */ } showToast(msg); };
  const shown = PG_FAQ.map((sec) => ({ ...sec, items: sec.items.filter(match) }));
  const none = shown.every((sec) => !sec.items.length);
  return (
    <PgPage title="Aide & support" onBack={onBack}>
      <div className="pg-help-search">
        <input type="text" value={q} onChange={(e) => setQ(e.target.value)} placeholder={TX('Rechercher dans l\u2019aide…')} />
      </div>
      {shown.map((sec) => sec.items.length ? (
        <React.Fragment key={sec.s}>
          <div className="hm-sechead"><span>{TX(sec.s)}</span></div>
          <div className="hm-cardlist">
            {sec.items.map((f) => (
              <button key={f.q} className={`pg-faq ${open === f.q ? 'open' : ''}`} onClick={() => setOpen(open === f.q ? null : f.q)}>
                <span className="pg-faq-q">{TX(f.q)}<HMI.Chevron /></span>
                <span className="pg-faq-a">{TX(f.a)}</span>
              </button>
            ))}
          </div>
        </React.Fragment>
      ) : null)}
      {none ? <div className="hm-empty">{TX('Aucune réponse ne correspond. Le support vous répond sous 24 h.')}</div> : null}
      <div className="hm-sechead"><span>{TX('Contact')}</span></div>
      <div className="hm-cardlist">
        <button className="hm-row" onClick={() => showToast(TX('Message envoyé · réponse sous 24 h'))}>
          <span className="hm-row-ic green"><HMI.Help s={17} /></span>
          <span className="hm-row-txt"><b>{TX('Contacter le support')}</b><em>{TX('Réponse sous 24 h, 7 j/7')}</em></span>
          <HMI.Chevron c="#A1A1AA" />
        </button>
        <button className="hm-row" onClick={() => copy('support@footpass.app', TX('Adresse copiée'))}>
          <span className="hm-row-ic"><HMI.Bell s={16} /></span>
          <span className="hm-row-txt"><b>support@footpass.app</b><em>{TX('Copier l\u2019adresse')}</em></span>
          <HMI.Chevron c="#A1A1AA" />
        </button>
        <button className="hm-row" onClick={() => showToast(TX('FAQ complète et guides sur footpass.app/faq'))}>
          <span className="hm-row-ic"><FPIcon.Doc s={15} /></span>
          <span className="hm-row-txt"><b>{TX('FAQ complète & guides')}</b><em>footpass.app/faq</em></span>
          <HMI.Chevron c="#A1A1AA" />
        </button>
      </div>
      <div className="hm-listfoot">FOOTPASS® Messenger v2.1 · footpass.app/aide</div>
    </PgPage>
  );
}

// ═══════ FEUILLE · NOUVEAU MESSAGE ═══════
function ContactRow({ p, onClick, right }) {
  const inner = (
    <React.Fragment>
      {p.photo ? <FPAvatar size={40} initials={p.initials} src={p.photo} /> : <span className="hm-avatar" style={{ width: 40, height: 40, fontSize: 13 }}>{p.initials}</span>}
      <span className="hm-row-txt">
        <b>{window.fpUpperLast(p.name)}</b>
        <em>{window.m4RoleColor && p.fam ? <React.Fragment><span style={{ color: window.m4RoleColor(p.fam) }}>{TX(p.role)}</span>{p.org ? ' · ' + p.org + ' ' : ' '}</React.Fragment> : `${TX(p.role)} · ${p.org} `}<FPIcon.Shield s={9} /></em>
      </span>
      {right || <HMI.Chevron c="#A1A1AA" />}
    </React.Fragment>
  );
  // `right` peut contenir des boutons → wrapper non-<button> (imbrication invalide sinon)
  if (right) {
    return (
      <div className="hm-row" role="button" tabIndex={0} onClick={onClick} style={{ cursor: 'pointer' }}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick && onClick(); } }}>
        {inner}
      </div>
    );
  }
  return <button className="hm-row" onClick={onClick}>{inner}</button>;
}
// Familles (mêmes teintes que la liste Messages · P1 Spectre équilibré)
const NM_FAMS = [
  { id: 'joueur', label: 'Joueurs', c: '#5C9DF5' },
  { id: 'agent',  label: 'Agents',  c: '#A07CEA' },
  { id: 'staff',  label: 'Clubs',   c: '#E0A93E' },
  { id: 'reseau', label: 'Réseau',  c: '#EC6F77' },
];
const NM_ROLE_FAM = { 'Joueur': 'joueur', 'Agent': 'agent', 'Directeur sportif': 'staff', 'Recruteur': 'staff', 'Entraîneur': 'staff', 'Club': 'staff', 'CEO': 'staff', 'Président': 'staff', 'Juriste': 'reseau', 'Médecin': 'reseau', 'Avocat': 'reseau' };
const nmFam = (p) => p.fam || NM_ROLE_FAM[p.role] || 'staff';
const nmNorm = (s) => (s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
const nmLetter = (p) => { const c = nmNorm(window.fpUpperLast(p.name)).charAt(0).toUpperCase(); return /[A-Z]/.test(c) ? c : '#'; };
const NmSearchIcon = () => (
  <svg width="16" height="16" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.6"></circle><path d="M12.5 12.5L16 16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"></path></svg>
);
const NmGroupIcon = ({ c = 'currentColor' }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3.1"></circle><path d="M3.6 19c0-3 2.4-5 5.4-5s5.4 2 5.4 5"></path><path d="M16 5.3a3 3 0 010 5.4"></path><path d="M17.6 14c2.3.5 3.9 2.3 3.9 5"></path></svg>
);
const NmInviteIcon = ({ c = 'currentColor' }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3.5" y="3.5" width="6.3" height="6.3" rx="1.3"></rect><rect x="3.5" y="14.2" width="6.3" height="6.3" rx="1.3"></rect><rect x="14.2" y="3.5" width="6.3" height="6.3" rx="1.3"></rect><path d="M14.2 14.2h3.1v3.1M20.5 14.2v6.3M14.2 20.5h3.1"></path></svg>
);
const NmBroadcastIcon = ({ c = 'currentColor' }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 10v4a1 1 0 001 1h2l5 4V5L6 9H4a1 1 0 00-1 1z"></path><path d="M16 8.6a4 4 0 010 6.8M18.6 6.2a7 7 0 010 11.6"></path></svg>
);
const NmCloseIcon = () => (
  <svg width="15" height="15" viewBox="0 0 22 22" fill="none"><path d="M16 6L6 16M6 6l10 10" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"></path></svg>
);
const NM_ALPHA = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('');

function NewMessageSheet({ onClose, onPick, showToast }) {
  const [q, setQ] = useStateQ('');
  const [fam, setFam] = useStateQ('all');
  const sheetRef = React.useRef(null);
  const pick = (id) => { onClose(); onPick(id); };
  const act = (m) => { if (showToast) showToast(m); onClose(); };

  const all = React.useMemo(() => Object.values(FP_PEERS)
    .map((p) => ({ ...p, fam: nmFam(p) }))
    .sort((a, b) => window.fpUpperLast(a.name).localeCompare(window.fpUpperLast(b.name), 'fr', { sensitivity: 'base' })), []);

  const counts = React.useMemo(() => all.reduce((m, p) => { m[p.fam] = (m[p.fam] || 0) + 1; return m; }, {}), [all]);

  const nq = nmNorm(q.trim());
  const filtered = all.filter((p) =>
    (fam === 'all' || p.fam === fam) &&
    (!nq || nmNorm(p.name + ' ' + (p.role || '') + ' ' + (p.org || '')).includes(nq)));

  const showRecents = !nq && fam === 'all';
  const recents = showRecents
    ? (window.FP_CONVOS || []).map((m) => FP_PEERS[m.id]).filter(Boolean).map((p) => ({ ...p, fam: nmFam(p) }))
    : [];

  // Groupage alphabétique (A → Z) de la liste filtrée
  const groups = [];
  filtered.forEach((p) => {
    const L = nmLetter(p);
    const g = groups[groups.length - 1];
    if (!g || g.L !== L) groups.push({ L, items: [p] });
    else g.items.push(p);
  });
  const present = new Set(groups.map((g) => g.L));

  // Index A→Z : saute à la 1re section ≥ lettre touchée (sous la barre épinglée)
  const jump = (L) => {
    const sheet = sheetRef.current; if (!sheet) return;
    const start = NM_ALPHA.indexOf(L);
    let target = null;
    for (let i = start; i < NM_ALPHA.length && !target; i++) target = sheet.querySelector('[data-letter="' + NM_ALPHA[i] + '"]');
    if (!target) return;
    const tools = sheet.querySelector('.nm-tools');
    const toolsH = tools ? tools.offsetHeight : 96;
    sheet.scrollTo({ top: Math.max(0, target.offsetTop - toolsH - 4) });
  };

  return (
    <div className="pg-sheetwrap">
      <div className="pg-scrim" onClick={onClose}></div>
      <div className="pg-sheet nm-sheet" ref={sheetRef}>
        <span className="pg-grab"></span>
        <div className="nm-tools">
          <div className="nm-head">
            <span className="nm-title">{TX('Nouveau message')}</span>
            <button className="nm-close" onClick={onClose} aria-label="Fermer"><NmCloseIcon /></button>
          </div>
          <div className="hm-search nm-search">
            <NmSearchIcon />
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={TX('Rechercher un nom, un club…')} />
            {q ? <button className="hm-search-clear" onClick={() => setQ('')} aria-label="Effacer">✕</button> : null}
          </div>
          <div className="hm-chips nm-chips">
            <button className={`hm-chip ${fam === 'all' ? 'on' : ''}`} onClick={() => setFam('all')}>{TX('Tous')}</button>
            {NM_FAMS.map((f) => (
              <button key={f.id} className={`hm-chip ${fam === f.id ? 'on' : ''}`} onClick={() => setFam(f.id)}>
                <span className="hm-chip-dot" style={{ background: f.c }}></span>
                <span>{TX(f.label)}</span>
                <span className="hm-chip-badge">{counts[f.id] || 0}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="nm-scroll">
          {!nq ? (
            <div className="hm-cardlist nm-actions">
              <button className="hm-row nm-action" onClick={() => act(TX('Groupe sécurisé · sélectionnez les membres (bientôt)'))}>
                <span className="hm-row-ic"><NmGroupIcon c="var(--acc-bright, #00C49A)" /></span>
                <span className="hm-row-txt"><b>{TX('Nouveau groupe')}</b><em>{TX('Discussion chiffrée à plusieurs')}</em></span>
                <HMI.Chevron c="#A1A1AA" />
              </button>
              <button className="hm-row nm-action" onClick={() => act(TX('Lien d’invitation Pass ID copié · expire dans 24 h'))}>
                <span className="hm-row-ic"><NmInviteIcon c="var(--acc-bright, #00C49A)" /></span>
                <span className="hm-row-txt"><b>{TX('Inviter via Pass ID')}</b><em>{TX('Partager un lien vérifié')}</em></span>
                <HMI.Chevron c="#A1A1AA" />
              </button>
              <button className="hm-row nm-action" onClick={() => act(TX('Diffusion · choisissez vos destinataires (bientôt)'))}>
                <span className="hm-row-ic"><NmBroadcastIcon c="var(--acc-bright, #00C49A)" /></span>
                <span className="hm-row-txt"><b>{TX('Diffusion sécurisée')}</b><em>{TX('Un message, plusieurs contacts')}</em></span>
                <HMI.Chevron c="#A1A1AA" />
              </button>
            </div>
          ) : null}

          {recents.length ? (
            <React.Fragment>
              <div className="hm-sechead nm-sechead"><span>{TX('Contacts fréquents')}</span></div>
              <div className="hm-cardlist nm-group">
                {recents.map((p) => <ContactRow key={'r' + p.id} p={p} onClick={() => pick(p.id)} />)}
              </div>
            </React.Fragment>
          ) : null}

          {groups.length ? groups.map((g) => (
            <React.Fragment key={g.L}>
              <div className="hm-sechead nm-sechead nm-letter" data-letter={g.L}><span>{g.L}</span><em>{g.items.length}</em></div>
              <div className="hm-cardlist nm-group">
                {g.items.map((p) => <ContactRow key={p.id} p={p} onClick={() => pick(p.id)} />)}
              </div>
            </React.Fragment>
          )) : (
            <div className="hm-empty nm-empty">{TX('Aucun contact pour « ')}{q} »</div>
          )}

          <div className="hm-listfoot"><FPIcon.Shield s={10} /> {TX('Tous vos contacts sont vérifiés Pass ID')}</div>
        </div>
      </div>

      {!nq && groups.length ? (
        <div className="nm-rail">
          {NM_ALPHA.map((L) => (
            <button key={L} className={`nm-railL ${present.has(L) ? 'on' : ''}`} onClick={() => jump(L)}>{L}</button>
          ))}
        </div>
      ) : null}
    </div>
  );
}

// ═══════ FEUILLE · NOUVEL APPEL ═══════
// Recherche · appel / visio / message par contact · ajout par QR ou n° Pass ID
const NcScanIcon = ({ c = 'currentColor' }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 8V5.5A1.5 1.5 0 015.5 4H8M16 4h2.5A1.5 1.5 0 0120 5.5V8M20 16v2.5a1.5 1.5 0 01-1.5 1.5H16M8 20H5.5A1.5 1.5 0 014 18.5V16"></path>
    <path d="M4 12h16"></path>
  </svg>
);
const NcHashIcon = ({ c = 'currentColor' }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round">
    <path d="M9.5 4L8 20M16 4l-1.5 16M4.5 9h16M3.5 15h16"></path>
  </svg>
);
const NcBubbleIcon = ({ s = 17 }) => (
  <svg width={s} height={s} viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M19 10.8a7.6 7.6 0 0 1-11 6.8L4 19l1.4-3.8A7.6 7.6 0 1 1 19 10.8z"></path>
  </svg>
);
// Contact découvert par scan / numéro (démo)
const NC_NEW_PEER = { id: 'theo', name: 'Théo Lemaire', initials: 'TL', role: 'Joueur', org: 'RC Lens', fam: 'joueur', pass: 'FP-2043-8817' };

function NewCallSheet({ onClose, onVoice, onVideo, onOpenChat, showToast }) {
  const [q, setQ] = useStateQ('');
  const [mode, setMode] = useStateQ('list'); // 'list' | 'scan' | 'passid'
  const [found, setFound] = useStateQ(null);
  const [num, setNum] = useStateQ('');
  // Scan · détection simulée après ~2 s
  React.useEffect(() => {
    if (mode !== 'scan' || found) return;
    const t = setTimeout(() => setFound(NC_NEW_PEER), 2000);
    return () => clearTimeout(t);
  }, [mode, found]);

  const nq = nmNorm(q.trim());
  const contacts = Object.values(FP_PEERS)
    .sort((a, b) => window.fpUpperLast(a.name).localeCompare(window.fpUpperLast(b.name), 'fr', { sensitivity: 'base' }))
    .filter((p) => !nq || nmNorm(p.name + ' ' + (p.role || '') + ' ' + (p.org || '')).includes(nq));

  const go = (fn, id) => { onClose(); fn(id); };
  const back = () => { setMode('list'); setFound(null); setNum(''); };
  const addFound = () => {
    if (!FP_PEERS[found.id]) FP_PEERS[found.id] = { ...found };
    if (showToast) showToast(window.fpUpperLast(found.name) + ' ajouté à vos contacts · Pass ID vérifié');
    setQ(''); back();
  };
  const fmtNum = (d) => (d.length > 4 ? d.slice(0, 4) + '-' + d.slice(4) : d);
  const verifyWith = (d) => {
    if (d.length < 8) { if (showToast) showToast('Numéro incomplet : 8 chiffres requis'); return; }
    setFound({ ...NC_NEW_PEER, pass: 'FP-' + fmtNum(d) });
  };
  // Pavé numérique · le « FP- » est déjà prêt, on ne tape que les chiffres
  const tapKey = (k) => {
    if (found) return;
    const nd = (num + k).slice(0, 8);
    setNum(nd);
    if (nd.length === 8) setTimeout(() => verifyWith(nd), 260);
  };
  const delKey = () => { if (!found) setNum((n) => n.slice(0, -1)); };

  const foundCard = found ? (
    <div className="nc-found">
      <span className="hm-avatar nc-found-av">{found.initials}</span>
      <b>{window.fpUpperLast(found.name)}</b>
      <em><span style={{ color: window.m4RoleColor ? window.m4RoleColor(found.fam) : 'inherit' }}>{TX(found.role)}</span> · {found.org}</em>
      <span className="nc-found-pass"><FPIcon.Shield s={10} /> {TX('Pass ID vérifié')} · {found.pass}</span>
      {FP_PEERS[found.id] ? (
        <span className="nc-found-done">{TX('Déjà dans vos contacts')}</span>
      ) : (
        <button className="pg-btn primary nc-found-add" onClick={addFound}>{TX('Ajouter aux contacts')}</button>
      )}
    </div>
  ) : null;

  return (
    <div className="pg-sheetwrap">
      <div className="pg-scrim" onClick={onClose}></div>
      <div className="pg-sheet nm-sheet">
        <span className="pg-grab"></span>
        <div className="nm-tools">
          <div className="nm-head">
            {mode !== 'list' ? (
              <button className="nc-back" onClick={back} aria-label="Retour"><FPIcon.Back c="currentColor" /></button>
            ) : null}
            <span className="nm-title">
              {mode === 'scan' ? TX('Scanner un Pass ID') : mode === 'passid' ? TX('Numéro Pass ID') : TX('Nouvel appel')}
            </span>
            <button className="nm-close" onClick={onClose} aria-label="Fermer"><NmCloseIcon /></button>
          </div>
          {mode === 'list' ? (
            <div className="hm-search nm-search">
              <NmSearchIcon />
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={TX('Rechercher un nom, un club…')} />
              {q ? <button className="hm-search-clear" onClick={() => setQ('')} aria-label="Effacer">✕</button> : null}
            </div>
          ) : null}
        </div>

        <div className="nm-scroll">
          {mode === 'scan' ? (
            <div className="nc-scan">
              {found ? foundCard : (
                <React.Fragment>
                  <div className="nc-scan-frame">
                    <span className="nc-c tl"></span><span className="nc-c tr"></span>
                    <span className="nc-c bl"></span><span className="nc-c br"></span>
                    <NcScanIcon c="rgba(255,255,255,0.22)" />
                    <span className="nc-scan-line"></span>
                  </div>
                  <p className="nc-hint">{TX('Placez le QR code Pass ID de votre contact dans le cadre')}</p>
                </React.Fragment>
              )}
            </div>
          ) : mode === 'passid' ? (
            <div className="nc-pass">
              <div className="nc-passrow">
                <div className="nc-passfield" aria-label="Numéro Pass ID">
                  <span className="nc-pre">FP-</span>
                  <b className="nc-typed">{fmtNum(num)}</b>
                  {!found && num.length < 8 ? <span className="nc-caret"></span> : null}
                  <em className="nc-ghost">{'2043-8817'.slice(fmtNum(num).length)}</em>
                </div>
                <button className="nc-verify" disabled={num.length < 8 || !!found} onClick={() => verifyWith(num)}>{TX('Vérifier')}</button>
              </div>
              <p className="nc-hint">{TX('Le numéro figure sur la carte Pass ID de votre contact.')}</p>
              {foundCard}
              {!found ? (
                <div className="nc-kbd" aria-label="Clavier numérique">
                  {[['1', ''], ['2', 'ABC'], ['3', 'DEF'], ['4', 'GHI'], ['5', 'JKL'], ['6', 'MNO'], ['7', 'PQRS'], ['8', 'TUV'], ['9', 'WXYZ']].map(([k, sub]) => (
                    <button key={k} className="nc-key" onClick={() => tapKey(k)}><b>{k}</b>{sub ? <em>{sub}</em> : null}</button>
                  ))}
                  <span></span>
                  <button className="nc-key" onClick={() => tapKey('0')}><b>0</b></button>
                  <button className="nc-key del" aria-label="Effacer" onClick={delKey}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 5h10a1.5 1.5 0 011.5 1.5v11A1.5 1.5 0 0119 19H9l-5.6-6.3a1 1 0 010-1.4L9 5z"></path><path d="M12.5 9.5l5 5M17.5 9.5l-5 5"></path></svg>
                  </button>
                </div>
              ) : null}
            </div>
          ) : (
            <React.Fragment>
              {!nq ? (
                <div className="hm-cardlist nm-actions">
                  <button className="hm-row nm-action" onClick={() => { setMode('scan'); }}>
                    <span className="hm-row-ic"><NcScanIcon c="var(--acc-bright, #00C49A)" /></span>
                    <span className="hm-row-txt"><b>{TX('Scanner un QR code')}</b><em>{TX('Ajouter un contact vérifié en personne')}</em></span>
                    <HMI.Chevron c="#A1A1AA" />
                  </button>
                  <button className="hm-row nm-action" onClick={() => { setMode('passid'); }}>
                    <span className="hm-row-ic"><NcHashIcon c="var(--acc-bright, #00C49A)" /></span>
                    <span className="hm-row-txt"><b>{TX('Ajouter par numéro Pass ID')}</b><em>{TX('FP-0000-0000 · identité vérifiée')}</em></span>
                    <HMI.Chevron c="#A1A1AA" />
                  </button>
                </div>
              ) : null}
              <div className="hm-cardlist">
                {contacts.map((p) => (
                  <ContactRow key={p.id} p={p} onClick={() => go(onVoice, p.id)}
                    right={
                      <span className="pg-contact-acts">
                        <button className="pg-roundbtn" aria-label="Message" onClick={(e) => { e.stopPropagation(); go(onOpenChat, p.id); }}><NcBubbleIcon s={16} /></button>
                        <button className="pg-roundbtn" aria-label="Appel vocal" onClick={(e) => { e.stopPropagation(); go(onVoice, p.id); }}><FPIcon.Phone s={16} /></button>
                        <button className="pg-roundbtn" aria-label="Appel vidéo" onClick={(e) => { e.stopPropagation(); go(onVideo, p.id); }}><FPIcon.Video s={18} /></button>
                      </span>
                    } />
                ))}
                {!contacts.length ? <div className="hm-empty nm-empty">{TX('Aucun contact pour « ')}{q} »</div> : null}
              </div>
              <div className="hm-listfoot"><FPIcon.Shield s={10} /> {TX('Appels chiffrés de bout en bout')}</div>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

// ═══════ FEUILLE · DÉTAIL ÉVÉNEMENT ═══════
function EventSheet({ ev, onClose, onConfirm, onRemove, showToast }) {
  return (
    <PgSheet onClose={onClose}>
      <div className="pg-ev-head">
        <span className="pg-ev-date"><b>{TX(ev.whenB)}</b><em>{TX(ev.whenE)}</em></span>
        <span>
          <div className="pg-ev-name">{TX(ev.title)}</div>
          <div className="pg-ev-sub">{TX(ev.sub)}</div>
        </span>
      </div>
      <div className="pg-info">
        <div className="pg-inforow"><span>{TX('Avec')}</span><b>{ev.who}</b></div>
        <div className="pg-inforow"><span>{TX('Lieu')}</span><b>{TX(ev.sub)}</b></div>
        <div className="pg-inforow"><span>{TX('Statut')}</span>{ev.status === 'ok' ? <span className="pg-pill ok">{TX('Confirmé')}</span> : <span className="pg-pill warn">{TX('À confirmer')}</span>}</div>
      </div>
      <div className="pg-sheet-actions">
        {ev.status !== 'ok' ? (
          <React.Fragment>
            <button className="pg-btn primary" onClick={() => { onConfirm(ev.id); showToast(TX('Présence confirmée · les participants sont notifiés')); onClose(); }}>{TX('Confirmer ma présence')}</button>
            <button className="pg-btn" onClick={() => { showToast(TX('Proposition envoyée à ') + ev.who); onClose(); }}>{TX('Proposer un autre créneau')}</button>
          </React.Fragment>
        ) : (
          <button className="pg-btn danger" onClick={() => { onRemove(ev.id); showToast(TX('Événement annulé · les participants sont notifiés')); onClose(); }}>{TX("Annuler l'événement")}</button>
        )}
      </div>
    </PgSheet>
  );
}

// ═══════ FEUILLE · NOUVEL ÉVÉNEMENT ═══════
const PG_EV_TPL = [
  { t: 'Appel vidéo', sub: 'Appel vidéo FOOTPASS' },
  { t: 'Rendez-vous club', sub: 'À définir' },
  { t: 'Visite médicale', sub: 'Centre médical' },
  { t: 'Signature de contrat', sub: 'Visioconférence sécurisée' },
];
function NewEventSheet({ onClose, onAdd, showToast }) {
  const [tpl, setTpl] = useStateQ(0);
  const [day, setDay] = useStateQ('Lun');
  const [hour, setHour] = useStateQ('10:00');
  const [who, setWho] = useStateQ('lucas');
  const add = () => {
    const p = FP_PEERS[who];
    onAdd({
      id: 'e' + Date.now(), sect: 'week', whenB: day, whenE: hour,
      title: `${PG_EV_TPL[tpl].t} · ${p.name}`, sub: PG_EV_TPL[tpl].sub, who: p.name, status: 'pending',
    });
    showToast(TX('Événement ajouté · invitation envoyée'));
    onClose();
  };
  return (
    <PgSheet onClose={onClose} title="Nouvel événement">
      <div className="pg-chiplbl">{TX('Type')}</div>
      <div className="pg-chips">
        {PG_EV_TPL.map((x, i) => <button key={x.t} className={`pg-chip ${tpl === i ? 'on' : ''}`} onClick={() => setTpl(i)}>{TX(x.t)}</button>)}
      </div>
      <div className="pg-chiplbl">{TX('Avec')}</div>
      <div className="pg-chips">
        {['lucas', 'karim', 'sira', 'amadou'].map((id) => (
          <button key={id} className={`pg-chip ${who === id ? 'on' : ''}`} onClick={() => setWho(id)}>{FP_PEERS[id].name.split(' ')[0]}</button>
        ))}
      </div>
      <div className="pg-chiplbl">{TX('Jour')}</div>
      <div className="pg-chips">
        {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven'].map((d) => <button key={d} className={`pg-chip ${day === d ? 'on' : ''}`} onClick={() => setDay(d)}>{d}</button>)}
      </div>
      <div className="pg-chiplbl">{TX('Heure')}</div>
      <div className="pg-chips">
        {['09:00', '10:00', '14:00', '16:30', '18:00'].map((h) => <button key={h} className={`pg-chip ${hour === h ? 'on' : ''}`} onClick={() => setHour(h)}>{h}</button>)}
      </div>
      <div className="pg-sheet-actions">
        <button className="pg-btn primary" onClick={add}>{TX("Envoyer l'invitation")}</button>
      </div>
    </PgSheet>
  );
}

// ═══════ FEUILLE · FICHE CONTACT (depuis une conversation) ═══════
function PeerSheet({ peer, onClose, onVoice, onVideo, confidential, setConfidential, confDur, setConfDur, onEph, showToast, hasTranslated, showOrig, setShowOrig, globeChip, setGlobeChip }) {
  const [structOpen, setStructOpen] = useStateQ(false);
  const [passOpen, setPassOpen] = useStateQ(false);
  const [agOpen, setAgOpen] = useStateQ(false);
  const [cpOpen, setCpOpen] = useStateQ(false);
  const [ephOpen, setEphOpen] = useStateQ(false);
  const applyEph = onEph || ((on, d) => { setConfidential(on); if (d && setConfDur) setConfDur(d); });
  const st = window.FP_STRUCTS && peer.orgId ? window.FP_STRUCTS[peer.orgId] : null;
  const ag = window.FP_STRUCTS && peer.agencyId ? window.FP_STRUCTS[peer.agencyId] : null;
  const cpM = ag && peer.cp && window.fpResolveCp ? window.fpResolveCp(peer.cp, ag.team) : null;
  const stLabel = (s) => (s.type || '').indexOf('Agence') === 0 ? TX('Agence') : TX('Structure');
  const chev = <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"></path></svg>;
  return (
    <React.Fragment>
    <PgSheet onClose={onClose} inChat>
      <div className="pg-peer">
        {peer.photo ? <FPAvatar size={72} initials={peer.initials} src={peer.photo} /> : <span className="hm-avatar" style={{ width: 72, height: 72, fontSize: 22 }}>{peer.initials}</span>}
        <span>
          <div className="pg-peer-name">{window.fpUpperLast(peer.name)}</div>
          <div className="pg-peer-role" style={{ textAlign: 'center' }}>{window.m4RoleColor && peer.fam ? <React.Fragment><span style={{ color: window.m4RoleColor(peer.fam) }}>{peer.role}</span>{peer.org ? ' · ' + peer.org : ''}</React.Fragment> : `${peer.role} · ${peer.org}`}</div>
        </span>
        <span className="pg-peer-acts three">
          <button className="pg-btn" onClick={() => { onClose(); onVoice(); }}><FPIcon.Phone s={16} /> {TX('Appel')}</button>
          <button className="pg-btn" onClick={() => { onClose(); onVideo(); }}><FPIcon.Video s={18} /> {TX('Vidéo')}</button>
          <button className="pg-btn" onClick={onClose}><svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M8 2.3c3.6 0 6.4 2.4 6.4 5.3S11.6 13 8 13c-.8 0-1.5-.1-2.2-.3L2.9 13.8l.9-2.3C2.5 10.5 1.6 9.1 1.6 7.6 1.6 4.7 4.4 2.3 8 2.3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"></path></svg> {TX('Message')}</button>
        </span>
      </div>
      <div className="pg-info">
        <button className="pg-inforow fpst-link" onClick={() => setPassOpen(true)}><span>{TX('Identité')}</span><b>Pass ID {chev}</b></button>
        {st ? <button className="pg-inforow fpst-link" onClick={() => setStructOpen(true)}><span>{stLabel(st)}</span><b>{st.name} {chev}</b></button> : null}
        {ag ? <button className="pg-inforow fpst-link" onClick={() => setAgOpen(true)}><span>{TX('Agence')}</span><b>{ag.name} {chev}</b></button> : null}
        {cpM ? <button className="pg-inforow fpst-link" onClick={() => setCpOpen(true)}><span>{TX('Personne de contact')}</span><b>{cpM.name} {Array.isArray(peer.cp) ? <i className="pg-cpreg">{window.FP_MY_REGION || 'France'}</i> : null} {chev}</b></button> : null}
        {peer.phone ? <button className="pg-inforow fpst-link" onClick={() => { onClose(); onVoice(); }}><span>{TX('Téléphone')}</span><b className="ok"><FPIcon.Phone c="currentColor" s={12} /> {peer.phone}</b></button> : null}
        <div className="pg-inforow"><span>{TX('Chiffrement')}</span><b>{TX('Bout en bout · clés sur appareil')}</b></div>
        <button className="pg-inforow fpst-link" onClick={() => setEphOpen(true)}><span>{TX('Messages éphémères')}</span><b className={confidential ? 'ok' : ''}>{confidential ? <React.Fragment><FPIcon.Timer c="currentColor" s={12} /> {confDur}</React.Fragment> : TX('Désactivés')} {chev}</b></button>
      </div>
      <div className="pg-info">
        <div className="pg-inforow"><span><FPIcon.Globe s={12} c="currentColor" /> {TX('Afficher l’original')}</span><PgToggle on={showOrig} onChange={(v) => setShowOrig(v)} /></div>
        <div className="pg-inforow"><span>{TX('Bouton rapide dans le fil')}</span><PgToggle on={globeChip} onChange={(v) => setGlobeChip(v)} /></div>
      </div>
      <div className="pg-sheet-actions">
        <button className="pg-btn danger" onClick={() => { showToast(TX('Signalement transmis · contact bloqué')); onClose(); }}>{TX('Signaler & bloquer')}</button>
      </div>
    </PgSheet>
    {passOpen ? (
      <PgSheet inChat onClose={() => setPassOpen(false)} title="Pass ID" centerTitle>
        <div className="fpcard passid fpst-pass">
          <div className="passid-head"><FPIcon.Shield s={13} /><span className="passid-verified">{TX('IDENTITÉ VÉRIFIÉE')}</span></div>
          <div className="fpcard-row">
            <FPAvatar size={40} initials={peer.initials} src={peer.photo} ring />
            <div className="fpcard-main">
              <div className="passid-name">{window.fpUpperLast(peer.name)}</div>
              <div className="passid-num">{peer.passNo}</div>
            </div>
          </div>
          <div className="passid-foot"><span className="passid-bio"><FPIcon.FaceScan s={12} />{TX('Biométrie confirmée')}</span><span className="passid-since">{TX('Membre FOOTPASS')}</span></div>
        </div>
        <div className="hm-empty" style={{ paddingTop: 6 }}>{TX('Chaque membre FOOTPASS est vérifié à l’entrée · le Pass ID est sa carte d’identité numérique.')}</div>
      </PgSheet>
    ) : null}
    {ephOpen ? (
      <PgSheet inChat onClose={() => setEphOpen(false)} title={TX('Messages éphémères')} centerTitle>
        <div className="pg-info">
          {[[null, TX('Désactivés')], ['1 h', TX('1 heure')], ['24 h', TX('24 heures')], ['7 jours', TX('7 jours')], ['1 mois', TX('1 mois')]].map(([v, l]) => {
            const on = v === null ? !confidential : (confidential && confDur === v);
            return (
              <button key={l} className="pg-inforow fpst-link eph-opt" onClick={() => { applyEph(!!v, v || confDur); setEphOpen(false); }}>
                <span>{l}</span>
                <b className={on ? 'ok' : 'eph-none'}>{on ? <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3L13 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path></svg> : null}</b>
              </button>
            );
          })}
        </div>
        <div className="hm-empty" style={{ paddingTop: 6 }}>{TX('Une fois le délai écoulé, les messages envoyés dans cette conversation disparaissent pour tout le monde. Réglable à tout moment, par vous comme par votre contact.')}</div>
      </PgSheet>
    ) : null}
    {structOpen && window.FPStructSheet ? <FPStructSheet id={peer.orgId} onClose={() => setStructOpen(false)} /> : null}
    {agOpen && window.FPStructSheet ? <FPStructSheet id={peer.agencyId} onClose={() => setAgOpen(false)} /> : null}
    {cpOpen && cpM && window.FPStContact ? <FPStContact p={cpM} st={ag} onClose={() => setCpOpen(false)} onSwap={() => {}} /> : null}
    </React.Fragment>
  );
}

Object.assign(window, {
  SettingsPage, SubscriptionSheet, NotifsSheet, HelpPage, ContactRow,
  NewMessageSheet, NewCallSheet, EventSheet, NewEventSheet, PeerSheet,
});