// FOOTPASS Messenger v2 · création d'événement (feuille « Nouvel événement »)
// Quick-add intelligent façon Apple/Google Calendar :
//  • le titre est analysé en direct : « Meeting avec Sira le 12 juillet à 15h à Madrid »
//    → propose Sira à taguer, coche le jour, l'heure, la période et le lieu automatiquement
//  • catégories éditables + création d'une nouvelle catégorie (nom + couleur)
//  • chaque catégorie propose les personnes qui lui sont liées ; « + » ouvre la liste complète
//  • participants optionnels (vide = événement personnel), durée, rappel, note
// Chargé APRÈS agenda.jsx (partage AG_ALL / AG_TPL / AG_PERIODS / AG_PLACES via window).
const { useState: useStateG } = React;
const agTX = (s) => (typeof TX === 'function' ? TX(s) : s);
const { AG_ALL, AG_TPL, AG_PERIODS, AG_PLACES } = window;

const AG_DURS = ['30 min', '45 min', '1 h', '1 h 30', '2 h', 'Journée'];
const AG_REMINDS = ['Aucun', '30 min avant', '1 h avant', 'La veille'];
// Personnes liées à chaque catégorie (juridique → juriste + co-agent, etc.)
const AG_THEME_SUG = {
  deal: ['david', 'karim', 'marco', 'mufc'],
  medical: ['lucas', 'mathis', 'karim'],
  legal: ['sira', 'amadou'],
  sport: ['lucas', 'mathis', 'marco'],
  admin: ['amadou', 'sira'],
};
const AG_CAT_COLORS = (() => {
  // teintes perceptuellement bien séparées (plus denses dans les chauds où l'œil discrimine mieux)
  const hues = [4, 26, 44, 58, 84, 140, 172, 194, 220, 250, 280, 312, 334, 352];
  // clair, normal, foncé · écart de luminosité marqué pour bien les distinguer
  const tones = [{ s: 62, l: 74 }, { s: 72, l: 54 }, { s: 78, l: 37 }];
  const out = [];
  for (const h of hues) for (const t of tones) out.push(`hsl(${h}deg ${t.s}% ${t.l}%)`);
  // neutres : blanc cassé / gris clair / gris / anthracite
  out.push('#E4E7EA', '#B4BAC0', '#7C838C', '#4A515A');
  return out;
})();
// Analyse du titre
const AG_MONTH_WORDS = { juin: 6, juillet: 7, aout: 8, septembre: 9, octobre: 10, novembre: 11, decembre: 12, janvier: 13, fevrier: 14 };
const AG_CITY = { madrid: 'Valdebebas, Madrid', nantes: 'La Jonelière, Nantes', geneve: 'Classico Sport, Genève', paris: 'Café Kléber, Paris', porto: 'FC Porto, Estádio do Dragão', manchester: 'Carrington, Manchester', monaco: 'La Turbie, Monaco' };
const agDeacc = (s) => String(s).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
// Nettoie le titre libre des informations déjà capturées ailleurs (personnes, date, heure)
// → « Appel vidéo avec Marco le 13 août à 13h » devient « Appel vidéo »
const cleanEventTitle = (raw, whoNames) => {
  let out = raw;
  if (whoNames && whoNames.length) {
    const esc = whoNames.map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    const list = esc.join('|');
    out = out.replace(new RegExp('\\s*\\b(?:avec|et|pour|de|entre|\u00e0)\\s+(?:' + list + ')\\b', 'gi'), '');
    out = out.replace(new RegExp('\\s*\\b(?:' + list + ')\\b', 'gi'), '');
  }
  out = out
    .replace(/\s*\b(?:le\s+)?\d{1,2}(?:er)?\s+(?:juin|juillet|ao[uû]t|septembre|octobre|novembre|d[ée]cembre|janvier|f[ée]vrier)\b/gi, '')
    .replace(/\s*\b(?:demain|aujourd['’ ]?hui)\b/gi, '')
    .replace(/\s*\b(?:ce\s+)?(?:lundi|mardi|mercredi|jeudi|vendredi|samedi|dimanche)(?:\s+prochain)?\b/gi, '')
    .replace(/\s*\b(?:à|a|vers|dès|à\s+partir\s+de)?\s*\d{1,2}\s*[h:]\s*\d{0,2}\b/gi, '')
    .replace(/\s{2,}/g, ' ')
    .replace(/\s+([,.])/g, '$1')
    .replace(/^\s*(?:le|à|avec|et)\b\s*/i, '')
    .replace(/\s+(?:le|à|avec|et)\s*$/i, '')
    .trim();
  return out ? out.charAt(0).toUpperCase() + out.slice(1) : raw.trim();
};

function NewEventSheetV2({ onClose, onAdd, showToast, initDay, initM }) {
  const TH = window.FP_EV_THEMES;
  const MO = window.FP_MONTHS_2026;
  const cal = window.FP_CAL;
  const [title, setTitle] = useStateG('');
  const [tplIdx, setTplIdx] = useStateG(null);
  const [themeKs, setThemeKs] = useStateG(['deal']);
  const themeK = themeKs[0] || 'deal';
  const [whos, setWhos] = useStateG([]);
  const [showPick, setShowPick] = useStateG(false);
  const [pickQ, setPickQ] = useStateG('');
  const [newCat, setNewCat] = useStateG(false);
  const [catName, setCatName] = useStateG('');
  const [catColor, setCatColor] = useStateG(AG_CAT_COLORS[3]);
  const [m, setM] = useStateG(initM != null ? initM : 6);
  const [d, setD] = useStateG(initDay != null ? initDay : null);
  const [per, setPer] = useStateG(null);
  const [time, setTime] = useStateG(null);
  const [freeT, setFreeT] = useStateG(false);
  const [dur, setDur] = useStateG('1 h');
  const [locMode, setLocMode] = useStateG('place');
  const [place, setPlace] = useStateG('');
  const [remind, setRemind] = useStateG('30 min avant');
  const [note, setNote] = useStateG('');

  const tpl = tplIdx != null ? AG_TPL[tplIdx] : null;
  const month = MO[m];
  const period = AG_PERIODS.find((x) => x.id === per);

  // ── Analyse du titre : date, heure, lieu cochés automatiquement ──
  const parseTitle = (v) => {
    const low = ' ' + agDeacc(v) + ' ';
    const dm = low.match(/(?:le )?(\d{1,2})(?:er)? (juin|juillet|aout|septembre|octobre|novembre|decembre|janvier|fevrier)/);
    if (dm) {
      const mm = AG_MONTH_WORDS[dm[2]]; const dd = parseInt(dm[1], 10);
      if (MO[mm] && dd >= 1 && dd <= MO[mm].days && !(mm === 6 && dd < cal.todayD)) { setM(mm); setD(dd); }
    } else if (low.includes(' demain ')) { setM(6); setD(cal.todayD + 1); }
    else if (low.includes(" aujourd'hui ") || low.includes(' aujourd hui ')) { setM(6); setD(cal.todayD); }
    else {
      // « dimanche prochain », « ce samedi », « vendredi »… → prochaine occurrence de ce jour
      const wm = low.match(/ (?:ce )?(lundi|mardi|mercredi|jeudi|vendredi|samedi|dimanche)(?: prochain)? /);
      if (wm) {
        const DOWS = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'];
        const todayIdx = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].indexOf(window.fpDow(6, cal.todayD));
        let delta = (DOWS.indexOf(wm[1]) - todayIdx + 7) % 7;
        if (!delta) delta = 7; // « mercredi » dit un mercredi = celui de la semaine suivante
        let dd = cal.todayD + delta; let mm = 6;
        if (dd > MO[6].days) { dd -= MO[6].days; mm = 7; }
        setM(mm); setD(dd);
      }
    }
    const tm = low.match(/ (?:a |vers )?(\d{1,2})[h:](\d{2})?\b/);
    if (tm) {
      const hh = parseInt(tm[1], 10);
      if (hh >= 6 && hh <= 23) {
        setTime(String(hh).padStart(2, '0') + ':' + (tm[2] || '00'));
        setPer(hh < 12 ? 'am' : hh < 18 ? 'pm' : 'ev');
        setFreeT(false);
      }
    }
    if (low.includes(' visio ') || low.includes(' video ') || low.includes(' appel video ') || low.includes(' facetime ')) setLocMode('visio');
    else if (low.includes(' tel ') || low.includes(' telephone ') || low.includes(' appel tel')) setLocMode('tel');
    else { for (const c in AG_CITY) { if (low.includes(' ' + c) || low.includes(c + ' ')) { setLocMode('place'); setPlace(AG_CITY[c]); break; } } }
    // Qui : toute personne nommée dans la phrase est taguée automatiquement
    const foundWho = AG_ALL.filter((id) => low.includes(' ' + agDeacc(FP_PEERS[id].name.split(' ')[0]) + ' '));
    if (foundWho.length) setWhos((prev) => Array.from(new Set([...prev, ...foundWho])));
    // Type fréquent détecté (« appel vidéo » → gabarit correspondant, le reste se replie)
    // · par titre exact ou par mot-clé (« café » → Café / rencontre, « signer » → Signature…)
    const ti = AG_TPL.findIndex((t) => {
      const k = agDeacc(agTX(t.t));
      if (k.length > 3 && low.includes(' ' + k)) return true;
      return (t.kw || []).some((w) => low.includes(' ' + w));
    });
    if (ti >= 0 && ti !== tplIdx) { setTplIdx(ti); setThemeKs([AG_TPL[ti].theme]); setDur(AG_TPL[ti].dur); if (AG_TPL[ti].visio) setLocMode('visio'); }
  };
  const typeTitle = (v) => {
    setTitle(v);
    if (tpl && v !== agTX(tpl.t)) setTplIdx(null);
    parseTitle(v);
  };

  // Personnes détectées dans le titre → à taguer d'un tap
  const lowTitle = ' ' + agDeacc(title) + ' ';
  const nameSug = AG_ALL.filter((id) => !whos.includes(id) && title.trim() && lowTitle.includes(agDeacc(FP_PEERS[id].name.split(' ')[0])));

  // ── Suggestions fréquentes : pré-remplissent tout ──
  const pickTpl = (i) => {
    const t = AG_TPL[i];
    setTplIdx(i);
    if (!title.trim()) setTitle(agTX(t.t));
    setThemeKs([t.theme]);
    setDur(t.dur);
    setShowPick(false);
    if (t.visio) { setLocMode('visio'); setPlace(''); }
  };
  const toggleWho = (id) => setWhos(whos.includes(id) ? whos.filter((x) => x !== id) : [...whos, id]);
  const pickM = (mm) => { setM(mm); setD(null); setPer(null); setTime(null); };
  const pickPer = (id) => { setPer(id); setTime(null); setFreeT(false); };
  const typeFreeT = (v) => {
    const t = v.trim().replace('h', ':').replace(/\s/g, '');
    setTime(/^\d{1,2}:\d{2}$/.test(t) ? t : null);
  };

  // ── Catégories : la catégorie choisie propose ses personnes liées ──
  const pickCat = (k) => { setThemeKs((prev) => prev.includes(k) ? (prev.length > 1 ? prev.filter((x) => x !== k) : prev) : [...prev, k]); if (!tpl && whos.length === 0) setShowPick(false); };
  const createCat = () => {
    const key = 'cat' + Date.now();
    window.FP_EV_THEMES[key] = { label: catName.trim(), c: catColor };
    setThemeKs((prev) => Array.from(new Set([...prev, key])));
    setNewCat(false);
    setCatName('');
  };

  const baseWho = tpl ? tpl.sug : (AG_THEME_SUG[themeK] || AG_ALL.slice(0, 4));
  const shownWho = whos.length ? whos.slice() : Array.from(new Set([...baseWho, ...whos])).slice(0, 5);

  const off = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].indexOf(window.fpDow(m, 1));
  const ready = title.trim() && d != null && (time || per);
  const personal = whos.length === 0;
  const names = whos.map((id) => FP_PEERS[id].name.split(' ')[0]);
  const placeLabel = locMode === 'visio' ? agTX('Appel vidéo FOOTPASS') : locMode === 'tel' ? agTX('Appel téléphonique') : (place.trim() || agTX('À définir'));
  // Heure exacte si choisie, sinon la période suffit (« Après-midi » plutôt que rien)
  const timeLabel = time || (period ? agTX(period.label) : '');
  // Titre nettoyé pour l'aperçu / l'envoi : la personne, la date et l'heure vivent déjà dans leurs propres champs
  const cleanTitle = cleanEventTitle(title.trim(), names) || title.trim();

  const add = () => {
    const evId = 'e' + Date.now();
    onAdd({
      id: evId, m, d, dow: window.fpDow(m, d), time: timeLabel, dur,
      title: cleanTitle,
      place: locMode === 'visio' ? 'Appel vidéo FOOTPASS' : locMode === 'tel' ? 'Appel téléphonique' : (place.trim() || agTX('À définir')),
      who: whos[0], whos: whos.length > 1 ? whos.slice() : undefined,
      theme: themeK, themes: themeKs.length > 1 ? themeKs.slice() : undefined, status: personal ? 'ok' : 'invited', chat: whos[0],
      remind: remind === '30 min avant' ? undefined : remind,
    });
    // La note rejoint le dossier du rendez-vous (bloc Notes de la fiche)
    if (note.trim()) {
      window.FP_NOTES = [{ id: 'n' + Date.now(), ev: evId, who: whos[0], text: note.trim(), ts: agTX("Aujourd'hui") + ' · 16:08' }, ...(window.FP_NOTES || [])];
      if (window.fpSaveNotes) window.fpSaveNotes();
    }
    showToast(personal ? agTX('Événement ajouté à votre agenda') : agTX('Invitation envoyée à ') + names.join(', '));
    onClose();
  };

  return (
    <PgSheet onClose={onClose} title="Nouvel événement">
      <div className="pg-chiplbl">{agTX('Titre')}</div>
      <input className="hm-flt-input" value={title} onChange={(e) => typeTitle(e.target.value)} placeholder={agTX('Ex. Meeting avec Sira le 12 juillet à 15h…')} />
      {nameSug.length ? (
        <React.Fragment>
          <div className="ag-hint ag-hint-freq">{agTX('Détecté dans le titre · touchez pour taguer')}</div>
          <div className="pg-chips">
            {nameSug.map((id) => {
              const p = FP_PEERS[id];
              return (
                <button key={id} className="pg-chip ag-whochip ag-tagsug" onClick={() => toggleWho(id)}>
                  <FPAvatar size={17} initials={p.initials} src={p.photo} />
                  {p.name.split(' ')[0]}
                  <span className="ag-tagplus">+</span>
                </button>
              );
            })}
          </div>
        </React.Fragment>
      ) : null}
      {/vid[ée]o|visio/i.test(title) ? (
        <div className="ag-hint ag-hint-freq">{agTX('Visio FOOTPASS détectée · lieu réglé automatiquement, modifiable plus bas')}</div>
      ) : null}
      <div className="ag-hint ag-hint-freq">{tplIdx != null ? agTX('Type sélectionné · touchez pour changer') : agTX('Fréquents')}</div>
      <div className="pg-chips">
        {(tplIdx != null ? [tplIdx] : AG_TPL.map((_, i) => i)).map((i) => {
          const x = AG_TPL[i];
          return (
            <button key={x.t} className={`pg-chip ag-typechip ${tplIdx === i ? 'on' : ''}`} style={{ '--tc': TH[x.theme].c }} onClick={() => (tplIdx === i ? setTplIdx(null) : pickTpl(i))}>
              <span className="ag-typedot"></span>{agTX(x.t)}
            </button>
          );
        })}
      </div>

      <div className="pg-chiplbl">{agTX('Avec')}</div>
      <div className="ag-hint">{whos.length ? agTX('Participants · touchez pour retirer, + pour ajouter') : (tpl ? agTX(tpl.hint) : agTX('Suggestions · sans participant, l\u2019événement reste personnel'))}</div>
      <div className="pg-chips">
        {shownWho.map((id) => {
          const p = FP_PEERS[id];
          return (
            <button key={id} className={`pg-chip ag-whochip ${whos.includes(id) ? 'on' : ''}`} onClick={() => toggleWho(id)}>
              <FPAvatar size={17} initials={p.initials} src={p.photo} />
              {p.name.split(' ')[0]}
            </button>
          );
        })}
        <button className={`pg-chip ag-plus ${showPick ? 'on' : ''}`} onClick={() => { if (showPick) setPickQ(''); setShowPick(!showPick); }} aria-label="Tous les contacts">{showPick ? '×' : '+'}</button>
      </div>
      {showPick ? (
        <div className="ag-contacts">
          <div className="ag-contact-search">
            <input value={pickQ} onChange={(e) => setPickQ(e.target.value)} placeholder={agTX('Rechercher un contact…')} autoFocus />
            {pickQ ? <button className="ag-contact-clear" onClick={() => setPickQ('')} aria-label="Effacer">×</button> : null}
          </div>
          {(() => {
            const q = agDeacc(pickQ.trim());
            const list = AG_ALL.filter((id) => { const p = FP_PEERS[id]; return !q || agDeacc(p.name + ' ' + agTX(p.role) + ' ' + (p.org || '')).includes(q); });
            if (!list.length) return <div className="ag-pick-empty">{agTX('Aucun contact trouvé')}</div>;
            return list.map((id) => {
              const p = FP_PEERS[id];
              const on = whos.includes(id);
              return (
                <button key={id} className={`ag-contact ${on ? 'on' : ''}`} onClick={() => toggleWho(id)}>
                  <FPAvatar size={26} initials={p.initials} src={p.photo} />
                  <span className="ag-contact-txt">
                    <b>{window.fpUpperLast(p.name)}</b>
                    <em>{agTX(p.role)}{p.org ? ' · ' + p.org : ''}</em>
                  </span>
                  <span className="ag-check">{on ? '✓' : '+'}</span>
                </button>
              );
            });
          })()}
        </div>
      ) : null}

      <div className="pg-chiplbl">{agTX('Mois')}</div>
      <div className="pg-chips ag-mrow">
        {Object.keys(MO).map(Number).map((mm) => (
          <button key={mm} className={`pg-chip ${m === mm ? 'on' : ''}`} onClick={() => pickM(mm)}>{agTX(MO[mm].label)}</button>
        ))}
      </div>

      <div className="pg-chiplbl">{agTX('Jour')}</div>
      <div className="ag-cal">
        <div className="ag-calhead">
          {['L', 'M', 'M', 'J', 'V', 'S', 'D'].map((x, i) => <em key={i}>{x}</em>)}
        </div>
        <div className="ag-dgrid">
          {Array.from({ length: off }).map((_, i) => <i key={'p' + i}></i>)}
          {Array.from({ length: month.days }).map((_, i) => {
            const dd = i + 1;
            const past = m === 6 && dd < cal.todayD;
            return (
              <button key={dd} disabled={past}
                className={`ag-dcell ${d === dd ? 'on' : ''} ${m === 6 && dd === cal.todayD ? 'today' : ''}`}
                onClick={() => setD(dd)}>{dd}</button>
            );
          })}
        </div>
      </div>

      {d != null ? (
        <React.Fragment>
          <div className="pg-chiplbl">{agTX('Période')}</div>
          <div className="pg-chips">
            {AG_PERIODS.map((x) => (
              <button key={x.id} className={`pg-chip ${per === x.id ? 'on' : ''}`} onClick={() => pickPer(x.id)}>{agTX(x.label)}</button>
            ))}
          </div>
        </React.Fragment>
      ) : null}

      {period ? (
        <React.Fragment>
          <div className="pg-chiplbl">{agTX('Heure')}</div>
          <div className="pg-chips">
            {period.hours.map((h) => (
              <button key={h} className={`pg-chip ${!freeT && time === h ? 'on' : ''}`} onClick={() => { setTime(h); setFreeT(false); }}>{h}</button>
            ))}
            {time && freeT !== true && period.hours.indexOf(time) < 0 ? (
              <button className="pg-chip on">{time}</button>
            ) : null}
            <button className={`pg-chip ${freeT ? 'on' : ''}`} onClick={() => { setFreeT(true); setTime(null); }}>{agTX('Autre…')}</button>
          </div>
          {freeT ? (
            <input className="hm-flt-input" onChange={(e) => typeFreeT(e.target.value)} placeholder={agTX('Ex. 12:15')} />
          ) : null}
        </React.Fragment>
      ) : null}

      {time ? (
        <React.Fragment>
          <div className="pg-chiplbl">{agTX('Durée')}</div>
          <div className="pg-chips">
            {AG_DURS.map((x) => (
              <button key={x} className={`pg-chip ${dur === x ? 'on' : ''}`} onClick={() => setDur(x)}>{agTX(x)}</button>
            ))}
          </div>
        </React.Fragment>
      ) : null}

      <div className="pg-chiplbl">{agTX('Lieu')}</div>
      <div className="pg-chips">
        <button className={`pg-chip ${locMode === 'place' ? 'on' : ''}`} onClick={() => setLocMode('place')}>{agTX('Sur place')}</button>
        <button className={`pg-chip ${locMode === 'visio' ? 'on' : ''}`} onClick={() => setLocMode('visio')}>{agTX('Visio FOOTPASS')}</button>
        <button className={`pg-chip ${locMode === 'tel' ? 'on' : ''}`} onClick={() => setLocMode('tel')}>{agTX('Téléphone')}</button>
      </div>
      {locMode === 'place' ? (
        <React.Fragment>
          <input className="hm-flt-input" value={place} onChange={(e) => setPlace(e.target.value)} placeholder={agTX('Rechercher une adresse ou un lieu…')} />
          <div className="ag-places">
            {AG_PLACES
              .filter((x) => !place.trim() || agTX(x).toLowerCase().includes(place.trim().toLowerCase()))
              .filter((x) => agTX(x) !== place)
              .slice(0, 4)
              .map((x) => (
                <button key={x} className="ag-place" onClick={() => setPlace(agTX(x))}>
                  <FPIcon.Pin s={13} />
                  <span>{agTX(x)}</span>
                </button>
              ))}
          </div>
        </React.Fragment>
      ) : null}

      <div className="pg-chiplbl">{agTX('Rappel')}</div>
      <div className="pg-chips">
        {AG_REMINDS.map((x) => (
          <button key={x} className={`pg-chip ${remind === x ? 'on' : ''}`} onClick={() => setRemind(x)}>{agTX(x)}</button>
        ))}
      </div>

      <div className="pg-chiplbl">{agTX('Catégorie')}</div>
      <div className="ag-hint">{agTX('Une ou plusieurs · touchez pour combiner')}</div>
      <div className="pg-chips">
        {Object.keys(TH).map((k) => (
          <button key={k} className={`pg-chip ag-typechip ${themeKs.includes(k) ? 'on' : ''}`} style={{ '--tc': TH[k].c }} onClick={() => pickCat(k)}>
            <span className="ag-typedot"></span>{agTX(TH[k].label)}
          </button>
        ))}
        <button className={`pg-chip ag-plus ${newCat ? 'on' : ''}`} onClick={() => setNewCat(!newCat)} aria-label="Nouvelle catégorie">+</button>
      </div>
      {newCat ? (
        <div className="ag-newcat">
          <input className="hm-flt-input" value={catName} onChange={(e) => setCatName(e.target.value)} placeholder={agTX('Nom de la catégorie…')} />
          <div className="ag-swatches">
            {AG_CAT_COLORS.map((c) => (
              <button key={c} className={`ag-swatch ${catColor === c ? 'on' : ''}`} style={{ background: c }} onClick={() => setCatColor(c)} aria-label={c}></button>
            ))}
          </div>
          <button className="pg-btn primary ag-catok" disabled={!catName.trim()} onClick={createCat}>{agTX('Créer la catégorie')}</button>
        </div>
      ) : null}

      <div className="pg-chiplbl">{agTX('Note')}</div>
      <div className="ag-hint">{agTX('Rejoint le dossier du rendez-vous · modifiable depuis sa fiche')}</div>
      <textarea className="hm-flt-input ag-notearea" rows={2} value={note} onChange={(e) => setNote(e.target.value)} placeholder={agTX('Optionnel · brief, points à aborder, documents…')}></textarea>

      {ready ? (
        <React.Fragment>
          <div className="pg-chiplbl">{agTX('Aperçu')}</div>
          {/* · tel que le rendez-vous apparaîtra dans l'agenda · */}
          <div className="ag-prev-ev" style={{ '--tc': (TH[themeK] || {}).c }}>
            <span className="ag-when"><b>{timeLabel}</b><em>{dur}</em></span>
            <span className="ag-bar"></span>
            <span className="hm-row-txt">
              <b>{cleanTitle}</b>
              <em>{agTX(window.fpDow(m, d))} {d} {agTX(month.short)} · {placeLabel}</em>
            </span>
            <span className="ag-right">
              <span className={`ag-tag ${personal ? 'ok' : 'invited'}`}>{personal ? agTX('Confirmé') : agTX('Invitation envoyée')}</span>
              {whos.length ? (
                <span className="ag-faces">
                  {whos.slice(0, 3).map((id) => {
                    const pp = FP_PEERS[id];
                    return <FPAvatar key={id} size={18} initials={pp.initials} src={pp.photo} />;
                  })}
                  {whos.length > 3 ? <i className="ag-more">+{whos.length - 3}</i> : null}
                </span>
              ) : null}
            </span>
          </div>
          {personal ? (
            <div className="ag-prev-cap">{agTX('Événement personnel · aucune invitation ne sera envoyée.')}</div>
          ) : (
            <React.Fragment>
              <div className="ag-prev-cap">{agTX('Message envoyé dans la conversation de')} {names.join(', ')} :</div>
              {/* · le message d'invitation tel qu'il apparaîtra dans le chat · */}
              <div className="ag-prevmsg" style={{ '--tc': (TH[themeK] || {}).c }}>
                <div className="ag-prevmsg-row">
                  <span className="ag-prev-date"><b>{d}</b><em>{agTX(month.badge)}</em></span>
                  <span className="ag-prevmsg-main">
                    <b>{cleanTitle}</b>
                    <em>{agTX(window.fpDow(m, d))} {d} {agTX(month.short)} · {timeLabel} · {dur}</em>
                    <em className="loc"><FPIcon.Pin s={10} /> {placeLabel}</em>
                  </span>
                </div>
                <div className="ag-prevmsg-actions"><span className="ok">{agTX('Confirmer')}</span><span>{agTX('Décliner')}</span></div>
                <div className="ag-prevmsg-note"><span className="dot"></span>{agTX('En attente de confirmation')}</div>
              </div>
            </React.Fragment>
          )}
        </React.Fragment>
      ) : null}

      <div className="pg-sheet-actions">
        <button className="pg-btn primary" disabled={!ready} onClick={add}>
          {personal ? agTX('Ajouter à mon agenda') : agTX("Envoyer l'invitation")}
        </button>
      </div>
      <div className="ag-formnote"><FPIcon.Shield s={10} /> {agTX('L\u2019invitation est signée avec votre Pass ID et apparaît dans la conversation.')}</div>
    </PgSheet>
  );
}

Object.assign(window, { NewEventSheetV2 });