// FOOTPASS Messenger v2 · PASSI, l'assistant personnel d'appels
//  • Activable / désactivable par chacun (état local, événement fp:passi)
//  • Récapitulatifs d'appels, tâches détectées (cochables), propositions de RDV
//  • Valide le calendrier RÉEL : confirme un événement en attente ou en ajoute un
//  • Chat normal : composer + réponses scriptées par mots-clés + suggestions
const { useState: useStatePS, useRef: useRefPS, useEffect: useEffectPS } = React;

// ── État d'activation partagé ──
const PS_KEY = 'fp_passi_on';
function psOn() { try { return localStorage.getItem(PS_KEY) === '1'; } catch (e) { return false; } }
function psSet(v) {
  try { localStorage.setItem(PS_KEY, v ? '1' : '0'); } catch (e) { /* ignore */ }
  window.dispatchEvent(new CustomEvent('fp:passi', { detail: { on: v } }));
}

const PassiIcon = ({ s = 16, c = 'currentColor' }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}>
    <path d="M12 2l2.1 7.9L22 12l-7.9 2.1L12 22l-2.1-7.9L2 12l7.9-2.1L12 2z"></path>
  </svg>
);
const PsCheckIc = ({ s = 10 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4.5 12.5l5 5L19.5 7"></path></svg>
);

// ── Contenus scriptés ──
const PS_RECAP_KARIM = {
  kind: 'recap', video: true,
  title: 'Appel vidéo · Karim Benatia', meta: 'Hier · 08:47 · Directeur sportif, FC Nantes',
  points: [
    'Le staff valide le protocole avant la visite médicale de Mathis',
    'Rapport IRM du genou attendu avant jeudi',
    'Karim envoie la convocation officielle mercredi',
  ],
};
const PS_RECAP_ROOM = {
  kind: 'recap', video: true,
  title: 'Visio · Dossier Lucas × Real', meta: 'Hier · 31:08 · David, Sira, Lucas',
  points: [
    'Le Real confirme l\u2019offre : 120 M€ + bonus, 6 ans',
    'Visite médicale à caler avant la signature (mar 24)',
    'Sira relit l\u2019avenant v2.1 et rend ses annotations vendredi',
  ],
};
const PS_TASKS = {
  kind: 'tasks',
  items: [
    { id: 't1', label: 'Demander le rapport IRM à Karim' },
    { id: 't2', label: 'Rappeler Edward Hartley (manqué ce matin)' },
    { id: 't3', label: 'Relancer Sira · avenant Real v2.1' },
  ],
};
const PS_RDV_CONFIRM = {
  kind: 'rdv', id: 'rdv-vm', mode: 'confirm', evId: 'e1',
  title: 'Visite médicale · FC Nantes', when: 'Jeudi 19 juin · 10:30', place: 'La Jonelière, Nantes',
};
const PS_RDV_ADD = {
  kind: 'rdv', id: 'rdv-eh', mode: 'add',
  title: 'Rappel · Edward Hartley', when: 'Jeudi 19 juin · 09:00', place: 'Appel FOOTPASS',
  ev: { d: 19, dow: 'Jeu', time: '09:00', dur: '15 min', title: 'Rappel · Edward Hartley', place: 'Appel FOOTPASS', who: 'mufc', theme: 'admin', status: 'ok', chat: 'mufc' },
};

// ── Page assistant (sous-page plein écran) ──
function PassiPage({ onBack, showToast, onAddEvent, onConfirmEvent }) {
  const [on, setOn] = useStatePS(psOn());
  const [msgs, setMsgs] = useStatePS([]);
  const [typing, setTyping] = useStatePS(false);
  const [input, setInput] = useStatePS('');
  const [done, setDone] = useStatePS({});
  const [rdvOk, setRdvOk] = useStatePS({});
  const bodyRef = useRefPS(null);
  const timersRef = useRefPS([]);
  const idRef = useRefPS(1);
  const startedRef = useRefPS(false);
  const mid = () => 'ps' + (idRef.current++);

  const clearTimers = () => { timersRef.current.forEach(clearTimeout); timersRef.current = []; };
  useEffectPS(() => () => clearTimers(), []);
  useEffectPS(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, typing]);

  // Enchaîne des messages Passi avec indicateur de frappe
  const seq = (list) => {
    let acc = 160;
    list.forEach(({ m, t = 800 }) => {
      const showAt = acc;
      timersRef.current.push(setTimeout(() => setTyping(true), showAt));
      acc += t;
      timersRef.current.push(setTimeout(() => { setTyping(false); setMsgs((x) => [...x, { ...m, id: mid() }]); }, acc));
      acc += 260;
    });
  };

  const startScript = () => {
    if (startedRef.current) return;
    startedRef.current = true;
    const intent = window.fpPassiIntent; window.fpPassiIntent = null;
    if (intent && intent.kind === 'room-recap') {
      seq([
        { m: { side: 'passi', kind: 'text', text: 'Voici le récap du dernier appel du salon « Dossier Lucas × Real ».' }, t: 700 },
        { m: { side: 'passi', ...PS_RECAP_ROOM }, t: 900 },
        { m: { side: 'passi', kind: 'text', text: 'J\u2019ai relevé une échéance : la visite médicale doit être confirmée.' }, t: 800 },
        { m: { side: 'passi', ...PS_RDV_CONFIRM }, t: 700 },
      ]);
      return;
    }
    seq([
      { m: { side: 'passi', kind: 'text', text: 'Bonjour Alexandre. J\u2019ai suivi vos appels de la semaine : voici l\u2019essentiel.' }, t: 800 },
      { m: { side: 'passi', ...PS_RECAP_KARIM }, t: 1000 },
      { m: { side: 'passi', kind: 'text', text: '3 tâches détectées dans vos derniers échanges :' }, t: 700 },
      { m: { side: 'passi', ...PS_TASKS }, t: 800 },
      { m: { side: 'passi', kind: 'text', text: 'Et un rendez-vous attend votre confirmation :' }, t: 700 },
      { m: { side: 'passi', ...PS_RDV_CONFIRM }, t: 700 },
    ]);
  };
  useEffectPS(() => { if (on) startScript(); }, [on]);

  const reply = (raw) => {
    const n = raw.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
    if (/(recap|resum)/.test(n)) {
      return [
        { m: { side: 'passi', kind: 'text', text: 'Voici le récap de votre dernier appel de groupe :' }, t: 700 },
        { m: { side: 'passi', ...PS_RECAP_ROOM }, t: 900 },
      ];
    }
    if (/(tache|todo|a faire)/.test(n)) {
      const left = PS_TASKS.items.filter((it) => !done[it.id]).length;
      return [
        { m: { side: 'passi', kind: 'text', text: left ? `Il vous reste ${left} tâche${left > 1 ? 's' : ''} :` : 'Tout est fait. Belle journée.' }, t: 600 },
        ...(left ? [{ m: { side: 'passi', ...PS_TASKS }, t: 700 }] : []),
      ];
    }
    if (/(rappel|appel|programme|rendez|rdv|calendrier|agenda)/.test(n)) {
      return [
        { m: { side: 'passi', kind: 'text', text: 'Je vous propose ce créneau : je l\u2019ajoute à votre agenda si vous validez :' }, t: 750 },
        { m: { side: 'passi', ...PS_RDV_ADD }, t: 700 },
      ];
    }
    if (/merci/.test(n)) {
      return [{ m: { side: 'passi', kind: 'text', text: 'Avec plaisir. Je reste à l\u2019écoute de vos prochains appels.' }, t: 600 }];
    }
    return [{ m: { side: 'passi', kind: 'text', text: 'Je peux préparer un récap d\u2019appel, suivre vos tâches ou caler un rendez-vous · dites-moi.' }, t: 700 }];
  };

  const send = (preset) => {
    const text = (preset != null ? preset : input).trim();
    if (!text) return;
    setInput('');
    setMsgs((x) => [...x, { id: mid(), side: 'me', kind: 'text', text }]);
    seq(reply(text));
  };

  const toggle = (v) => {
    psSet(v); setOn(v);
    if (showToast) showToast(v ? 'Passi activé · il suivra vos prochains appels' : 'Passi désactivé · aucune donnée conservée');
  };

  const validateRdv = (m) => {
    if (m.mode === 'confirm') { onConfirmEvent && onConfirmEvent(m.evId); }
    else { onAddEvent && onAddEvent({ ...m.ev, id: 'e-passi-' + Date.now() }); }
    setRdvOk((x) => ({ ...x, [m.id || m.evId]: true }));
    if (showToast) showToast('Agenda mis à jour · ' + m.when);
    seq([{ m: { side: 'passi', kind: 'text', text: 'C\u2019est noté au calendrier. Je vous préviens 15 min avant.' }, t: 650 }]);
  };
  const otherSlot = () => seq([{ m: { side: 'passi', kind: 'text', text: 'Bien sûr · indiquez-moi le jour et l\u2019heure qui vous arrangent.' }, t: 650 }]);

  const bubble = (m) => {
    if (m.kind === 'text') return <div key={m.id} className={`ps-b ${m.side === 'me' ? 'me' : 'passi'}`}>{m.text}</div>;
    if (m.kind === 'recap') return (
      <div key={m.id} className="ps-card">
        <div className="ps-card-h">
          <span className="ps-card-ic">{m.video ? <HMI.VideoCam s={14} /> : <HMI.Phone s={12} />}</span>
          <span className="ps-card-t"><b>{m.title}</b><em>{m.meta}</em></span>
        </div>
        <ul className="ps-points">{m.points.map((p, i) => <li key={i}>{p}</li>)}</ul>
      </div>
    );
    if (m.kind === 'tasks') return (
      <div key={m.id} className="ps-card">
        {m.items.map((it) => (
          <button key={it.id} className={`ps-task ${done[it.id] ? 'done' : ''}`} onClick={() => setDone((x) => ({ ...x, [it.id]: !x[it.id] }))}>
            <span className="ps-checkbox">{done[it.id] ? <PsCheckIc /> : null}</span>
            <span>{it.label}</span>
          </button>
        ))}
      </div>
    );
    if (m.kind === 'rdv') {
      const ok = rdvOk[m.id || m.evId];
      return (
        <div key={m.id} className="ps-card">
          <div className="ps-card-h">
            <span className="ps-card-ic cal"><HMI.Calendar s={14} /></span>
            <span className="ps-card-t"><b>{m.title}</b><em>{m.when} · {m.place}</em></span>
          </div>
          {ok ? (
            <div className="ps-okline"><PsCheckIc s={11} /> {m.mode === 'confirm' ? 'Confirmé' : 'Ajouté'} à l’agenda · {m.when}</div>
          ) : (
            <div className="ps-rdv-acts">
              <button className="ps-btn pri" onClick={() => validateRdv(m)}>{m.mode === 'confirm' ? 'Confirmer au calendrier' : 'Ajouter à l\u2019agenda'}</button>
              <button className="ps-btn" onClick={otherSlot}>Autre créneau</button>
            </div>
          )}
        </div>
      );
    }
    return null;
  };

  return (
    <div className="pg ps" data-screen-label="Passi · assistant">
      <FPStatusBar light />
      <div className="pg-head">
        <button className="pg-back" onClick={onBack} aria-label="Retour"><FPIcon.Back c="#EAEAEA" /></button>
        <span className="ps-idav"><PassiIcon s={15} /></span>
        <span className="ps-idtxt"><b>Passi</b><em>Assistant personnel · chiffré</em></span>
        <PgToggle on={on} onChange={toggle} />
      </div>

      {!on ? (
        <div className="ps-intro">
          <span className="ps-hero"><PassiIcon s={26} /></span>
          <h2>Votre assistant d’appels</h2>
          <p>Passi suit uniquement ce que vous lui confiez. Chacun choisit de l’activer, ou pas.</p>
          <div className="ps-feats">
            <span><PsCheckIc s={9} /> Récapitulatif après chaque appel</span>
            <span><PsCheckIc s={9} /> Tâches détectées et suivies</span>
            <span><PsCheckIc s={9} /> Rendez-vous proposés, agenda validé</span>
          </div>
          <button className="ps-btn pri big" onClick={() => toggle(true)}>Activer Passi</button>
          <div className="ps-priv"><FPIcon.Shield s={10} /> Chiffré · visible par vous seul · désactivable à tout moment</div>
        </div>
      ) : (
        <React.Fragment>
          <div className="ps-body" ref={bodyRef}>
            <div className="ps-priv top"><FPIcon.Shield s={10} /> Conversation privée · vos récaps ne quittent pas votre Pass</div>
            {msgs.map(bubble)}
            {typing ? <div className="ps-b passi typing"><span></span><span></span><span></span></div> : null}
          </div>
          <div className="ps-chips">
            {['Récap du dernier appel', 'Mes tâches', 'Programmer un rappel'].map((c) => (
              <button key={c} className="ps-chip" onClick={() => send(c)}>{c}</button>
            ))}
          </div>
          <div className="ps-comp">
            <input value={input} onChange={(e) => setInput(e.target.value)} placeholder="Écrire à Passi…"
              onKeyDown={(e) => { if (e.key === 'Enter') send(); }} />
            <button className="ps-send" onClick={() => send()} aria-label="Envoyer"><FPIcon.Send /></button>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { PassiPage, PassiIcon, psOn, psSet });