// FOOTPASS v2 · AUTORISATIONS · création (don / demande) + badge d’autorisation dans les conversations
// Le badge est un indicateur de confiance, pas un verrou : il prouve l’autorisation, il ne bloque rien.
const { useState: useStateMn } = React;

// ── Nouvelle autorisation · les 5 réglages de la spec + le sens (don / demande) ──
function MdNewAuth({ onClose, onCreate }) {
  const [sens, setSens] = useStateMn('don');        // don : j'émets · demande : je serai bénéficiaire
  const [pid, setPid] = useStateMn('lucas');
  const [level, setLevel] = useStateMn('Négociation');
  const [terr, setTerr] = useStateMn('France · Ligue 1');
  // (le territoire se choisit en cascade Monde → Continent → Pays → Championnat → Club)
  const [dur, setDur] = useStateMn('1 an · jusqu\u2019au 18 juin 2027');
  const [rev, setRev] = useStateMn('uni');
  const [visib, setVisib] = useStateMn('pub');
  const [deleg, setDeleg] = useStateMn(false);
  const people = ['lucas', 'mathis', 'sira', 'karim', 'amadou'];
  const chip = (on, lb, fn) => <button key={lb} className={`md-chip ${on ? 'on' : ''}`} onClick={fn}>{TX(lb)}</button>;
  const group = (lb, children, hint) => (
    <div className="md-nagroup">
      <span className="md-nalbl">{TX(lb)}</span>
      <div className="md-chipset">{children}</div>
      {hint ? <span className="md-nahint">{TX(hint)}</span> : null}
    </div>
  );
  const submit = () => {
    const item = {
      id: 'n' + Date.now(), pid, dirIn: sens !== 'don',
      create: sens === 'don' ? 'GIFT' : 'REQUEST',
      type: 'Autorisation limitée', for: null,
      level, terr, until: dur, rev, visib, deleg,
      acc: sens === 'don' ? { i: true, b: false } : { i: false, b: true },
      status: 'pending',
    };
    onCreate(item, sens);
  };
  return (
    <PgSheet onClose={onClose} title="Nouvelle autorisation">
      {group('Sens', [
        chip(sens === 'don', 'J\u2019autorise (don)', () => setSens('don')),
        chip(sens === 'demande', 'Je demande', () => setSens('demande')),
      ], sens === 'don' ? 'Vous êtes l\u2019émetteur · l\u2019autre partie devra accepter' : 'Vous serez le bénéficiaire · l\u2019émetteur devra accepter')}
      {group('Personne', people.map((id) => chip(pid === id, window.fpUpperLast(FP_PEERS[id].name), () => setPid(id))))}
      {group('Niveau d\u2019action', ['Information', 'Négociation', 'Signature'].map((l) => chip(level === l, l, () => setLevel(l))))}
      <div className="md-nagroup">
        <span className="md-nalbl">{TX('Territoire')}</span>
        <MdTerrPicker value={terr} onChange={setTerr} />
        <span className="md-nahint">{TX('Cascade vérifiable : Monde → Continent → Pays → Championnat → Club · jamais de texte libre')}</span>
      </div>
      {group('Durée', [['6 mois', '6 mois · jusqu\u2019au 18 déc. 2026'], ['1 an', '1 an · jusqu\u2019au 18 juin 2027'], ['2 ans', '2 ans · jusqu\u2019au 18 juin 2028'], ['Indéterminée', 'Durée indéterminée']].map(([lb, v]) => chip(dur === v, lb, () => setDur(v))))}
      {group('Révocation', [
        chip(rev === 'uni', 'Unilatérale', () => setRev('uni')),
        chip(rev === 'bi', 'Bilatérale', () => setRev('bi')),
      ], rev === 'uni' ? 'Chaque partie peut couper · effet immédiat' : 'Il faudra l\u2019accord des deux pour couper')}
      {group('Visibilité', [
        chip(visib === 'pub', 'Publique', () => setVisib('pub')),
        chip(visib === 'priv', 'Privée', () => setVisib('priv')),
      ], visib === 'pub' ? 'Badge « Autorisé par … » avec le nom' : 'Badge neutre « Représentant autorisé »')}
      {group('Délégation', [
        chip(!deleg, 'Non', () => setDeleg(false)),
        chip(deleg, 'Oui', () => setDeleg(true)),
      ], 'Définitif · ce réglage ne pourra jamais être modifié')}
      <div className="pg-sheet-actions">
        <button className="pg-btn primary" onClick={submit}>{TX('Envoyer pour accord')}</button>
      </div>
      <div className="hm-empty" style={{ paddingTop: 2 }}>{TX('Accord bilatéral requis · rien n\u2019est actif tant que les deux parties n\u2019ont pas dit oui.')}</div>
    </PgSheet>
  );
}

// Identité affichée comme partout dans l'app : rôle teinté famille · structure
const MN_ROLE_FAM = { 'Joueur': 'joueur', 'Agent': 'agent', 'Directeur sportif': 'staff', 'Recruteur': 'staff', 'Entraîneur': 'staff', 'CEO': 'staff', 'Juriste': 'reseau' };
const mnIdLine = (px) => {
  if (!px || !px.role) return null;
  const tx = window.TX || ((s) => s);
  const c = window.m4RoleColor ? window.m4RoleColor(px.fam || MN_ROLE_FAM[px.role] || 'staff') : 'inherit';
  return (
    <span className="md-party-id">
      <span className="role" style={{ color: c, fontStyle: 'normal' }}>{tx(px.role)}</span>
      {px.org ? <span className="sep"> · </span> : null}
      {px.org ? <span className="org">{px.org}</span> : null}
    </span>
  );
};

// ── Autorisation envoyée dans une conversation ──
// Choisir parmi MES autorisations (ce que d'autres m'ont autorisé à faire) et l'envoyer
// comme preuve dans le fil. Le destinataire la vérifie à l'instant.
const fpMyAuths = () => {
  const A = window.FP_AUTH || {};
  return [...(A.mandates || []), ...(A.received || [])]
    .filter((x) => x.dirIn !== false && (x.status === 'active' || x.status === 'soon') && x.pid && FP_PEERS[x.pid]);
};
function FPAuthPickerSheet({ onClose, onPick }) {
  const tx = window.TX || ((s) => s);
  const list = fpMyAuths();
  return (
    <PgSheet inChat onClose={onClose} title="Envoyer une autorisation">
      <div className="hm-empty" style={{ paddingTop: 0, textAlign: 'left' }}>{tx('Prouvez que vous êtes bien autorisé à agir pour cette personne. Votre interlocuteur pourra la vérifier à l’instant.')}</div>
      <div className="md-picklist">
        {list.map((m) => {
          const p = FP_PEERS[m.pid];
          return (
            <button key={m.id} className="md-pickrow" onClick={() => onPick(m)}>
              <FPAvatar size={38} initials={p.initials} src={p.photo} />
              <span className="md-pickmain">
                <b>{window.fpUpperLast(p.name)}</b>
                <em>{tx(window.fpAuthKind ? window.fpAuthKind(m) : m.type)} · {tx(m.terr)}</em>
              </span>
              <span className="md-pickend">{mdPill(m.status)}</span>
            </button>
          );
        })}
        {list.length === 0 ? <div className="hm-empty">{tx('Aucune autorisation active pour le moment.')}</div> : null}
      </div>
    </PgSheet>
  );
}
function FPAuthProofSheet({ m, onClose }) {
  const tx = window.TX || ((s) => s);
  if (!m) return null;
  const p = m.who || (m.pid ? FP_PEERS[m.pid] : null);
  const bp = m.benef || FP_ME;
  return (
    <React.Fragment>
      {(
        <PgSheet inChat onClose={onClose} title="Autorisation vérifiée" centerTitle>
          <div className="md-parties">
            <span className="md-party"><FPAvatar size={40} initials={p.initials} src={p.photo} /><b style={{ fontSize: window.fpUpperLast(p.name).length > 15 ? 11.5 : 13, whiteSpace: 'nowrap' }}>{window.fpUpperLast(p.name)}</b>{mnIdLine(p)}<em>{tx('Émetteur')}</em></span>
            <i className="md-chain-arr big"><MdArrow s={14} /></i>
            <span className="md-party"><FPAvatar size={40} initials={bp.initials || 'AD'} src={bp.photo} /><b style={{ fontSize: window.fpUpperLast(bp.name).length > 15 ? 11.5 : 13, whiteSpace: 'nowrap' }}>{window.fpUpperLast(bp.name)}</b>{mnIdLine(bp)}<em>{tx('Bénéficiaire')}</em></span>
          </div>
          <div className="pg-info">
            <div className="pg-inforow"><span>{tx('Type')}</span><b style={{ maxWidth: 190, textAlign: 'right' }}>{tx(m.type)}</b></div>
            <div className="pg-inforow"><span>{tx('Niveau d\u2019action')}</span><b className="md-lvls"><i className="md-lvl">{mdLevelIc(m.level)}</i> {tx(m.level)}</b></div>
            <div className="pg-inforow"><span>{tx('Territoire')}</span><b>{tx(m.terr)}</b></div>
            <div className="pg-inforow"><span>{tx('Validité')}</span><b>{tx(m.until)}</b></div>
            <div className="pg-inforow"><span>{tx('Statut')}</span>{mdPill(m.status)}</div>
            <div className="pg-inforow"><span>{tx('Vérification')}</span><b className="ok"><FPIcon.Shield s={11} /> {tx('À l\u2019instant · à chaque message')}</b></div>
          </div>
          <div className="hm-empty" style={{ paddingTop: 0 }}>{tx('L’autorisation prouve qui agit, pour qui, et jusqu’où. Révoquée ou expirée, elle disparaît automatiquement.')}</div>
        </PgSheet>
      )}
    </React.Fragment>
  );
}

Object.assign(window, { MdNewAuth, FPAuthPickerSheet, FPAuthProofSheet });