// Modales de configuration (desktop) — personnalité résident + Livana, centres d'intérêt
// Adapté du design system mobile (ui_kits/app/screens/Config.jsx)

const { useState: useStateCfg, useEffect: useEffectCfg } = React;

function useEscClose(onClose) {
  useEffectCfg(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);
}

// Personnalité du résident (étape 1) + de Livana (étape 2)
function ConfigModal({ resident, onClose }) {
  const [page, setPage] = useStateCfg(0);
  useEscClose(onClose);

  const [r, setR] = useStateCfg({
    firstName: resident.firstName,
    lastName: resident.lastName,
    age: resident.age != null ? resident.age : '', // '' évite le warning React quand l'âge est absent (Firebase)
    identity: resident.story || '',
  });
  const [l, setL] = useStateCfg({
    livanaName: 'Livana',
    opening: "Allô, c'est Livana, comment allez-vous ?",
    closing: 'Je vais vous laisser, à très bientôt.',
    livanaIdentity: '',
    speakingNotes: 'Parler doucement et lentement, vouvoiement, ton chaleureux et rassurant.',
  });

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">Étape {page + 1} sur 2</div>
            <div className="cfg-modal-title">{page === 0 ? `Personnalité · ${resident.firstName}` : 'Personnalité de Livana'}</div>
          </div>
          <div className="cfg-head-right">
            <div className="cfg-progress">
              <span className={`cfg-dot ${page >= 0 ? 'on' : ''}`}></span>
              <span className={`cfg-dot ${page >= 1 ? 'on' : ''}`}></span>
            </div>
            <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
          </div>
        </div>

        <div className="cfg-modal-body">
          {page === 0 ? (
            <React.Fragment>
              <div className="cfg-row two">
                <label className="cfg-field">
                  <span className="cfg-label">Prénom</span>
                  <input className="cfg-input" value={r.firstName} onChange={(e) => setR({ ...r, firstName: e.target.value })} />
                </label>
                <label className="cfg-field">
                  <span className="cfg-label">Nom</span>
                  <input className="cfg-input" value={r.lastName} onChange={(e) => setR({ ...r, lastName: e.target.value })} />
                </label>
              </div>
              <label className="cfg-field cfg-field-narrow">
                <span className="cfg-label">Âge</span>
                <input type="number" className="cfg-input" value={r.age} onChange={(e) => setR({ ...r, age: e.target.value })} />
              </label>
              <label className="cfg-field">
                <span className="cfg-label">Identité de la personne</span>
                <span className="cfg-hint">Son histoire, sa vie, ses passions, son entourage…</span>
                <textarea className="cfg-textarea" rows={6}
                  placeholder="Ex. Marguerite a vécu 60 ans à Tours. Ancienne institutrice, passionnée de roses…"
                  value={r.identity} onChange={(e) => setR({ ...r, identity: e.target.value })} />
              </label>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <label className="cfg-field">
                <span className="cfg-label">Prénom de Livana</span>
                <span className="cfg-hint">Le prénom utilisé pendant l'appel</span>
                <input className="cfg-input" value={l.livanaName} onChange={(e) => setL({ ...l, livanaName: e.target.value })} />
              </label>
              <div className="cfg-row two">
                <label className="cfg-field">
                  <span className="cfg-label">Phrase de lancement</span>
                  <textarea className="cfg-textarea" rows={2} value={l.opening} onChange={(e) => setL({ ...l, opening: e.target.value })} />
                </label>
                <label className="cfg-field">
                  <span className="cfg-label">Phrase de clôture</span>
                  <textarea className="cfg-textarea" rows={2} value={l.closing} onChange={(e) => setL({ ...l, closing: e.target.value })} />
                </label>
              </div>
              <label className="cfg-field">
                <span className="cfg-label">Identité de Livana</span>
                <span className="cfg-hint">L'identité que l'on invente à Livana (ex. nièce, voisine…)</span>
                <textarea className="cfg-textarea" rows={3}
                  placeholder="Ex. Livana est une amie de longue date qui appelle prendre des nouvelles."
                  value={l.livanaIdentity} onChange={(e) => setL({ ...l, livanaIdentity: e.target.value })} />
              </label>
              <label className="cfg-field">
                <span className="cfg-label">Manière de parler</span>
                <span className="cfg-hint">Ton, rythme, vocabulaire à privilégier ou à éviter…</span>
                <textarea className="cfg-textarea" rows={3}
                  value={l.speakingNotes} onChange={(e) => setL({ ...l, speakingNotes: e.target.value })} />
              </label>
            </React.Fragment>
          )}
        </div>

        <div className="cfg-modal-actions">
          {page === 0 ? (
            <React.Fragment>
              <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
              <button className="btn btn-primary" onClick={() => setPage(1)}>Suivant <Icon name="arrow-right" size={14} /></button>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <button className="btn btn-ghost" onClick={() => setPage(0)}><Icon name="chevron-left" size={14} /> Retour</button>
              <button className="btn btn-accent" onClick={onClose}><Icon name="check" size={14} /> Terminer</button>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

// Centres d'intérêt / sujets de conversation
function TopicsModal({ resident, calming, onClose }) {
  useEscClose(onClose);
  const seed = (calming && calming.length ? calming.slice() : ['', '', '']);
  const [topics, setTopics] = useStateCfg(seed);
  const update = (i, v) => setTopics((prev) => prev.map((t, idx) => (idx === i ? v : t)));
  const add = () => setTopics((prev) => [...prev, '']);
  const remove = (i) => setTopics((prev) => prev.filter((_, idx) => idx !== i));
  const save = () => { resident.calming = topics.map((t) => t.trim()).filter(Boolean); onClose(); };

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal cfg-modal-sm">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">{resident.firstName} {resident.lastName}</div>
            <div className="cfg-modal-title">Centres d'intérêt</div>
          </div>
          <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div className="cfg-modal-body">
          <p className="cfg-intro">Ces sujets seront évoqués lors de l'appel pour permettre un détournement d'attention en cas d'agitation.</p>
          {topics.map((t, i) => (
            <div key={i} className="dir-item">
              <span className="dir-num">{i + 1}</span>
              <textarea className="dir-input" rows={2}
                placeholder={['Ex. ses rosiers de Tours…', 'Ex. ses recettes de famille…', 'Ex. ses voyages en Bretagne…'][i] || 'Autre centre d\u2019intérêt…'}
                value={t} onChange={(e) => update(i, e.target.value)} />
              {topics.length > 1 && <button className="dir-del" onClick={() => remove(i)} title="Retirer"><Icon name="x" size={15} /></button>}
            </div>
          ))}
          <button className="btn btn-soft btn-sm" style={{ alignSelf: 'flex-start' }} onClick={add}><Icon name="plus" size={14} /> Ajouter un sujet</button>
        </div>

        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-accent" onClick={save}><Icon name="check" size={14} /> Enregistrer</button>
        </div>
      </div>
    </div>
  );
}

// Sujet unique que Livana doit approfondir pendant ses appels.
// Enregistré dans le champ `question_psy` de config_resident/default (Firebase) :
// Livana le lit pour orienter la conversation.
function DirectivesModal({ resident, onClose }) {
  useEscClose(onClose);
  const initiale = (resident.config && resident.config.questionPsy) || '';
  const [question, setQuestion] = useStateCfg(initiale);
  const [busy, setBusy] = useStateCfg(false);
  const [erreur, setErreur] = useStateCfg('');

  const save = async () => {
    if (busy) return;
    setBusy(true); setErreur('');
    const valeur = question.trim();
    try {
      await window.LivanaAPI.updateResidentConfig(resident.id, { question_psy: valeur });
      // Répercussion locale immédiate (le temps réel confirmera juste après)
      resident.config = Object.assign({}, resident.config || {}, { questionPsy: valeur });
      onClose();
    } catch (e) {
      console.warn('Enregistrement du sujet impossible :', e && e.code);
      setErreur(window.LivanaAPI.frError(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal cfg-modal-sm">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">{resident.firstName} {resident.lastName}</div>
            <div className="cfg-modal-title">Sujet à approfondir</div>
          </div>
          <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div className="cfg-modal-body">
          <p className="cfg-intro">Indiquez à Livana <b>un sujet</b> à creuser lors de ses appels. Elle le glissera naturellement dans la conversation pour recueillir des informations utiles à votre suivi, sans brusquer le résident.</p>
          <label className="cfg-field">
            <span className="cfg-label">Sujet à creuser</span>
            <textarea className="cfg-textarea" rows={4} value={question}
              onChange={(e) => setQuestion(e.target.value)}
              placeholder="Ex. L'amener à parler de sa sœur — étaient-elles proches, se voyaient-elles souvent ?" />
          </label>
          {erreur && <div className="cfg-live-err">{erreur}</div>}
          <p className="cfg-card-desc">Laissez vide pour qu'aucun sujet particulier ne soit abordé.</p>
        </div>

        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>Annuler</button>
          <button className="btn btn-accent" onClick={save} disabled={busy}>
            {busy ? 'Enregistrement…' : <React.Fragment><Icon name="check" size={14} /> Enregistrer</React.Fragment>}
          </button>
        </div>
      </div>
    </div>
  );
}

// Ajout d'un résident — parcours complet en 4 étapes
function AddResidentModal({ onClose }) {
  const [step, setStep] = useStateCfg(0);
  const [done, setDone] = useStateCfg(false);
  useEscClose(onClose);

  const [r, setR] = useStateCfg({ firstName: '', lastName: '', age: '', room: '', condition: '', identity: '' });
  const [l, setL] = useStateCfg({
    livanaName: 'Livana',
    opening: "Allô, c'est Livana, comment allez-vous ?",
    closing: 'Je vais vous laisser, à très bientôt.',
    livanaIdentity: '',
    speakingNotes: 'Parler doucement et lentement, vouvoiement, ton chaleureux et rassurant.',
  });
  const [topics, setTopics] = useStateCfg(['', '', '']);
  const updTopic = (i, v) => setTopics((prev) => prev.map((t, idx) => (idx === i ? v : t)));

  const STEPS = ['Identité', 'Personnalité de Livana', "Centres d'intérêt", 'Récapitulatif'];
  const step0Valid = r.firstName.trim() && r.lastName.trim();

  if (done) {
    return (
      <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="cfg-modal cfg-modal-sm">
          <div className="cfg-done">
            <div className="cfg-done-ic"><Icon name="check" size={30} /></div>
            <div className="cfg-done-title">{r.firstName} {r.lastName} ajouté·e</div>
            <div className="cfg-done-sub">Le résident est configuré et prêt pour son premier appel Livana.</div>
            <button className="btn btn-accent" onClick={onClose}>Terminer</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">Étape {step + 1} sur {STEPS.length} · Nouveau résident</div>
            <div className="cfg-modal-title">{STEPS[step]}</div>
          </div>
          <div className="cfg-head-right">
            <div className="cfg-progress">
              {STEPS.map((_, i) => <span key={i} className={`cfg-dot ${step >= i ? 'on' : ''}`}></span>)}
            </div>
            <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
          </div>
        </div>

        <div className="cfg-modal-body">
          {step === 0 && (
            <React.Fragment>
              <div className="cfg-row two">
                <label className="cfg-field">
                  <span className="cfg-label">Prénom</span>
                  <input className="cfg-input" autoFocus value={r.firstName} onChange={(e) => setR({ ...r, firstName: e.target.value })} placeholder="Marguerite" />
                </label>
                <label className="cfg-field">
                  <span className="cfg-label">Nom</span>
                  <input className="cfg-input" value={r.lastName} onChange={(e) => setR({ ...r, lastName: e.target.value })} placeholder="Dubois" />
                </label>
              </div>
              <div className="cfg-row two">
                <label className="cfg-field">
                  <span className="cfg-label">Âge</span>
                  <input type="number" className="cfg-input" value={r.age} onChange={(e) => setR({ ...r, age: e.target.value })} placeholder="84" />
                </label>
                <label className="cfg-field">
                  <span className="cfg-label">Chambre</span>
                  <input className="cfg-input" value={r.room} onChange={(e) => setR({ ...r, room: e.target.value })} placeholder="12" />
                </label>
              </div>
              <label className="cfg-field">
                <span className="cfg-label">État clinique</span>
                <input className="cfg-input" value={r.condition} onChange={(e) => setR({ ...r, condition: e.target.value })} placeholder="Maladie d'Alzheimer — stade léger à modéré" />
              </label>
              <label className="cfg-field">
                <span className="cfg-label">Identité de la personne</span>
                <span className="cfg-hint">Son histoire, sa vie, ses passions, son entourage…</span>
                <textarea className="cfg-textarea" rows={5}
                  placeholder="Ex. Ancienne institutrice à Tours. Veuve depuis 2019. Passionnée de jardinage…"
                  value={r.identity} onChange={(e) => setR({ ...r, identity: e.target.value })} />
              </label>
            </React.Fragment>
          )}

          {step === 1 && (
            <React.Fragment>
              <label className="cfg-field">
                <span className="cfg-label">Prénom de Livana</span>
                <span className="cfg-hint">Le prénom utilisé pendant l'appel</span>
                <input className="cfg-input" value={l.livanaName} onChange={(e) => setL({ ...l, livanaName: e.target.value })} />
              </label>
              <div className="cfg-row two">
                <label className="cfg-field">
                  <span className="cfg-label">Phrase de lancement</span>
                  <textarea className="cfg-textarea" rows={2} value={l.opening} onChange={(e) => setL({ ...l, opening: e.target.value })} />
                </label>
                <label className="cfg-field">
                  <span className="cfg-label">Phrase de clôture</span>
                  <textarea className="cfg-textarea" rows={2} value={l.closing} onChange={(e) => setL({ ...l, closing: e.target.value })} />
                </label>
              </div>
              <label className="cfg-field">
                <span className="cfg-label">Identité de Livana</span>
                <span className="cfg-hint">L'identité que l'on invente à Livana (ex. nièce, voisine…)</span>
                <textarea className="cfg-textarea" rows={2}
                  placeholder="Ex. Livana est une amie de longue date qui appelle prendre des nouvelles."
                  value={l.livanaIdentity} onChange={(e) => setL({ ...l, livanaIdentity: e.target.value })} />
              </label>
              <label className="cfg-field">
                <span className="cfg-label">Manière de parler</span>
                <textarea className="cfg-textarea" rows={2} value={l.speakingNotes} onChange={(e) => setL({ ...l, speakingNotes: e.target.value })} />
              </label>
            </React.Fragment>
          )}

          {step === 2 && (
            <React.Fragment>
              <p className="cfg-intro">Ces sujets seront évoqués lors de l'appel pour permettre un détournement d'attention en cas d'agitation.</p>
              {topics.map((t, i) => (
                <label key={i} className="cfg-field">
                  <span className="cfg-label">Sujet {i + 1}</span>
                  <textarea className="cfg-textarea" rows={2}
                    placeholder={['Ex. ses rosiers de Tours…', 'Ex. ses recettes de famille…', 'Ex. ses voyages en Bretagne…'][i]}
                    value={t} onChange={(e) => updTopic(i, e.target.value)} />
                </label>
              ))}
            </React.Fragment>
          )}

          {step === 3 && (
            <div className="cfg-recap">
              <div className="cfg-recap-row"><span className="k">Résident</span><span className="v">{r.firstName || '—'} {r.lastName} {r.age && `· ${r.age} ans`} {r.room && `· ch. ${r.room}`}</span></div>
              {r.condition && <div className="cfg-recap-row"><span className="k">État clinique</span><span className="v">{r.condition}</span></div>}
              {r.identity && <div className="cfg-recap-row"><span className="k">Identité</span><span className="v">{r.identity}</span></div>}
              <div className="cfg-recap-row"><span className="k">Livana</span><span className="v">se présente comme « {l.livanaName} »</span></div>
              <div className="cfg-recap-row"><span className="k">Sujets</span><span className="v">{topics.filter((t) => t.trim()).join(' · ') || 'Aucun renseigné'}</span></div>
              <div className="cfg-recap-note"><Icon name="lock" size={13} /> Les données seront chiffrées et soumises au secret médical.</div>
            </div>
          )}
        </div>

        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={step === 0 ? onClose : () => setStep(step - 1)}>
            {step === 0 ? 'Annuler' : <React.Fragment><Icon name="chevron-left" size={14} /> Retour</React.Fragment>}
          </button>
          {step === 0 && !step0Valid && <span className="cfg-actions-hint">Renseignez au moins le prénom et le nom</span>}
          {step < STEPS.length - 1 ? (
            <button className="btn btn-primary" disabled={step === 0 && !step0Valid} onClick={() => setStep(step + 1)}>
              Suivant <Icon name="arrow-right" size={14} />
            </button>
          ) : (
            <button className="btn btn-accent" onClick={() => setDone(true)}><Icon name="check" size={14} /> Créer le résident</button>
          )}
        </div>
      </div>
    </div>
  );
}

// Paramètres du compte psychologue
function SettingsModal({ onClose }) {
  useEscClose(onClose);
  const [tab, setTab] = useStateCfg('compte');
  const [f, setF] = useStateCfg({
    firstName: window.PSY.firstName, lastName: window.PSY.lastName,
    role: window.PSY.role, email: window.PSY.email,
    pwd: '', pwd2: '',
  });
  const set = (k, v) => setF((c) => ({ ...c, [k]: v }));
  const [saved, setSaved] = useStateCfg(false);
  const save = () => {
    window.PSY.firstName = f.firstName; window.PSY.lastName = f.lastName;
    window.PSY.role = f.role; window.PSY.email = f.email;
    window.PSY.initials = `${(f.firstName[0]||'').toUpperCase()}${(f.lastName[0]||'').toUpperCase()}`;
    setSaved(true);
    setTimeout(onClose, 700);
  };
  const pwdMismatch = f.pwd && f.pwd2 && f.pwd !== f.pwd2;

  // Code à 4 chiffres
  const [pin, setPin] = useStateCfg({ current: '', next: '', confirm: '' });
  const setP = (k, v) => setPin((c) => ({ ...c, [k]: v.replace(/\D/g, '').slice(0, 4) }));
  const [pinSaved, setPinSaved] = useStateCfg(false);
  const [pinErr, setPinErr] = useStateCfg('');
  const [pinBusy, setPinBusy] = useStateCfg(false);
  // Enregistre le nouveau code dans `code_app` de l'établissement (Firebase) :
  // il vaut pour toute l'équipe, sur tous les appareils.
  const savePin = async () => {
    if (pinBusy) return;
    const cur = window.SOIGNANT_PIN || '1234';
    if (pin.current !== cur) { setPinErr('Code actuel incorrect.'); return; }
    if (pin.next.length !== 4) { setPinErr('Le nouveau code doit comporter 4 chiffres.'); return; }
    if (pin.next !== pin.confirm) { setPinErr('Les nouveaux codes ne correspondent pas.'); return; }
    setPinErr('');
    setPinBusy(true);
    try {
      await window.LivanaAPI.updateCodeApp(pin.next); // met aussi à jour window.SOIGNANT_PIN
      setPinSaved(true);
      setTimeout(onClose, 900);
    } catch (e) {
      console.warn('Enregistrement du code impossible :', e && e.code);
      setPinErr(window.LivanaAPI.frError(e));
    } finally {
      setPinBusy(false);
    }
  };

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal cfg-modal-sm">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">Mon compte</div>
            <div className="cfg-modal-title">Paramètres</div>
          </div>
          <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div className="prof-tabs settings-tabs" role="tablist">
          <button className={`prof-tab ${tab === 'compte' ? 'active' : ''}`} onClick={() => setTab('compte')}>
            <Icon name="user" size={15} /> Profil
          </button>
          <button className={`prof-tab ${tab === 'code' ? 'active' : ''}`} onClick={() => setTab('code')}>
            <Icon name="lock" size={15} /> Code à 4 chiffres
          </button>
        </div>

        {tab === 'compte' ? (
        <React.Fragment>
        <div className="cfg-modal-body">
          <div className="cfg-row two">
            <label className="cfg-field">
              <span className="cfg-label">Prénom</span>
              <input className="cfg-input" value={f.firstName} onChange={(e) => set('firstName', e.target.value)} />
            </label>
            <label className="cfg-field">
              <span className="cfg-label">Nom</span>
              <input className="cfg-input" value={f.lastName} onChange={(e) => set('lastName', e.target.value)} />
            </label>
          </div>
          <label className="cfg-field">
            <span className="cfg-label">Fonction</span>
            <input className="cfg-input" value={f.role} onChange={(e) => set('role', e.target.value)} />
          </label>
          <label className="cfg-field">
            <span className="cfg-label">Adresse e-mail</span>
            <input className="cfg-input" type="email" value={f.email} onChange={(e) => set('email', e.target.value)} />
          </label>
          <div className="cfg-row two">
            <label className="cfg-field">
              <span className="cfg-label">Nouveau mot de passe</span>
              <input className="cfg-input" type="password" value={f.pwd} onChange={(e) => set('pwd', e.target.value)} placeholder="••••••••" />
            </label>
            <label className="cfg-field">
              <span className="cfg-label">Confirmer</span>
              <input className="cfg-input" type="password" value={f.pwd2} onChange={(e) => set('pwd2', e.target.value)} placeholder="••••••••" />
            </label>
          </div>
          {pwdMismatch && <div style={{ fontSize: 12, color: 'var(--danger)' }}>Les mots de passe ne correspondent pas.</div>}
        </div>
        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-accent" disabled={pwdMismatch} onClick={save}>{saved ? <React.Fragment><Icon name="check" size={14} /> Enregistré</React.Fragment> : 'Enregistrer'}</button>
        </div>
        </React.Fragment>
        ) : (
        <React.Fragment>
        <div className="cfg-modal-body">
          <p className="cfg-intro">Ce code à 4 chiffres protège l'accès aux contenus sensibles (résumés, transcriptions, suivis). Modifiez-le régulièrement.</p>
          <label className="cfg-field">
            <span className="cfg-label">Code actuel</span>
            <input className="cfg-input pin-input" type="password" inputMode="numeric" value={pin.current} onChange={(e) => setP('current', e.target.value)} placeholder="••••" />
          </label>
          <div className="cfg-row two">
            <label className="cfg-field">
              <span className="cfg-label">Nouveau code</span>
              <input className="cfg-input pin-input" type="password" inputMode="numeric" value={pin.next} onChange={(e) => setP('next', e.target.value)} placeholder="••••" />
            </label>
            <label className="cfg-field">
              <span className="cfg-label">Confirmer</span>
              <input className="cfg-input pin-input" type="password" inputMode="numeric" value={pin.confirm} onChange={(e) => setP('confirm', e.target.value)} placeholder="••••" />
            </label>
          </div>
          {pinErr && <div style={{ fontSize: 12, color: 'var(--danger)' }}>{pinErr}</div>}
          <div className="login-rgpd" style={{ marginTop: 4 }}>
            <span className="ic"><Icon name="lock" size={16} /></span>
            <span className="tx">
              Ce code est celui de votre établissement. Le modifier ici l'enregistre pour <b>toute votre équipe</b>, sur tous les appareils. Ne le partagez jamais en dehors des personnes habilitées.
            </span>
          </div>
        </div>
        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={onClose} disabled={pinBusy}>Annuler</button>
          <button className="btn btn-accent" onClick={savePin} disabled={pinBusy}>
            {pinSaved ? <React.Fragment><Icon name="check" size={14} /> Code modifié</React.Fragment> : pinBusy ? 'Enregistrement…' : 'Modifier le code'}
          </button>
        </div>
        </React.Fragment>
        )}
      </div>
    </div>
  );
}

// Rétention des données de santé (HDS)
function RetentionModal({ onClose }) {
  useEscClose(onClose);
  // Suppression totale des données de l'établissement
  const [delStep, setDelStep] = useStateCfg(0); // 0 = caché, 1 = confirmation, 2 = supprimé
  const [confirmWord, setConfirmWord] = useStateCfg('');
  const [delPin, setDelPin] = useStateCfg('');
  const expectedPin = window.SOIGNANT_PIN || '1234';
  const canDelete = confirmWord.trim().toUpperCase() === 'SUPPRIMER' && delPin === expectedPin;
  const doDelete = () => {
    window.RESIDENTS.forEach((r) => {
      r.calls = []; r.moodTimeline = []; r.directiveResponses = []; r.directiveHistory = [];
      if (r.kpi) { r.kpi.calls = 0; r.kpi.soothedRate = null; }
    });
    window.ACTIVITY = [];
    setDelStep(2);
  };

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal cfg-modal-sm">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">Hébergement HDS · sécurité</div>
            <div className="cfg-modal-title">Conservation des données</div>
          </div>
          <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div className="cfg-modal-body">
          <div className="ret-danger ret-danger-solo">
            <div className="ret-danger-head">
              <span className="ret-danger-ic"><Icon name="bell" size={16} /></span>
              <div>
                <div className="ret-danger-title">Supprimer toutes les données de l'établissement</div>
                <div className="ret-danger-sub">Appels effectués, dossiers thérapeutiques, humeurs et sujets de tous les résidents.</div>
              </div>
            </div>

            {delStep === 0 &&
            <button className="btn btn-danger btn-sm" onClick={() => setDelStep(1)}><Icon name="x" size={14} /> Supprimer toutes les données</button>
            }

            {delStep === 1 &&
            <div className="ret-danger-confirm">
              <p className="ret-danger-warn">Cette action est <b>irréversible</b>. Pour confirmer, saisissez le mot <b>SUPPRIMER</b> et votre code soignant à 4&nbsp;chiffres.</p>
              <input className="cfg-input" value={confirmWord} onChange={(e) => setConfirmWord(e.target.value)} placeholder="Tapez SUPPRIMER" />
              <input className="cfg-input" value={delPin} onChange={(e) => setDelPin(e.target.value.replace(/\D/g, '').slice(0, 4))} placeholder="Code à 4 chiffres" inputMode="numeric" />
              <div className="ret-danger-actions">
                <button className="btn btn-ghost btn-sm" onClick={() => { setDelStep(0); setConfirmWord(''); setDelPin(''); }}>Annuler</button>
                <button className="btn btn-danger btn-sm" disabled={!canDelete} onClick={doDelete}><Icon name="x" size={14} /> Confirmer la suppression</button>
              </div>
            </div>
            }

            {delStep === 2 &&
            <div className="ret-danger-done"><Icon name="check" size={16} /> Toutes les données de l'établissement ont été supprimées définitivement.</div>
            }
          </div>
        </div>

        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Fermer</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConfigModal, TopicsModal, DirectivesModal, AddResidentModal, SettingsModal, RetentionModal });