// features/residents — fiche résident (cœur de l'app)
// Onglets : accueil/chat, sujet à approfondir, historique, configuration.
// ConfigLivanaPanel écrit dans Firebase via LivanaAPI.updateResidentConfig.

const { useState: useStateP, useMemo: useMemoP } = React;

// ── Configuration Livana d'un résident : consultation + édition (écrit dans Firebase) ──
function ConfigLivanaPanel({ resident: r }) {
  const cfg = r.config;
  const vide = {
    age: '', livanaNom: '', phraseDebut: '', phraseFin: '', livanaIdentite: '',
    histoire: '', maniereDeParler: '', interet1: '', interet2: '', interet3: '',
  };
  const depuisConfig = (c) => c ? {
    age: c.age || '', livanaNom: c.livanaNom || '',
    phraseDebut: c.phraseDebut || '', phraseFin: c.phraseFin || '',
    livanaIdentite: c.livanaIdentite || '', histoire: c.histoire || '',
    maniereDeParler: c.maniereDeParler || '',
    interet1: c.interets[0] || '', interet2: c.interets[1] || '', interet3: c.interets[2] || '',
  } : vide;

  const [edition, setEdition] = React.useState(false);
  const [form, setForm] = React.useState(() => depuisConfig(cfg));
  const [enCours, setEnCours] = React.useState(false);
  const [erreur, setErreur] = React.useState('');
  const [succes, setSucces] = React.useState(false);

  // Revenir à la config du résident affiché (changement de fiche)
  React.useEffect(() => {
    setForm(depuisConfig(r.config));
    setEdition(false); setErreur(''); setSucces(false);
  }, [r.id]);

  const maj = (k) => (e) => setForm((f) => Object.assign({}, f, { [k]: e.target.value }));
  const annuler = () => { setForm(depuisConfig(r.config)); setEdition(false); setErreur(''); };
  const commencerEdition = () => { setForm(depuisConfig(r.config)); setEdition(true); setErreur(''); };
  // Hors édition on affiche toujours la configuration vivante (mise à jour en
  // temps réel) ; en édition, la saisie en cours prime et n'est jamais écrasée.
  const affiche = edition ? form : depuisConfig(r.config);

  const enregistrer = async () => {
    if (enCours) return;
    setEnCours(true); setErreur(''); setSucces(false);
    try {
      const api = window.LivanaAPI;
      await api.updateResidentConfig(r.id, api.configToFirebase(form));
      // Répercute localement pour que l'écran et le contexte IA soient à jour
      const interets = [form.interet1, form.interet2, form.interet3].map((s) => (s || '').trim()).filter(Boolean);
      r.config = Object.assign({}, r.config || {}, {
        age: form.age, livanaNom: form.livanaNom,
        phraseDebut: form.phraseDebut, phraseFin: form.phraseFin,
        livanaIdentite: form.livanaIdentite, histoire: form.histoire,
        maniereDeParler: form.maniereDeParler, interets: interets,
        misAJour: new Date(),
      });
      r.age = parseInt(form.age, 10) || null;
      r.story = form.histoire;
      r.calming = interets;
      setEdition(false); setSucces(true);
      setTimeout(() => setSucces(false), 4000);
    } catch (e) {
      console.warn('Enregistrement de la configuration impossible :', e && e.code);
      setErreur(window.LivanaAPI.frError(e));
    } finally {
      setEnCours(false);
    }
  };

  if (!cfg) {
    return (
      <div className="card panel">
        <div className="panel-head"><h3>Configuration des appels</h3></div>
        <p className="cfg-card-desc">Aucune configuration Livana enregistrée pour {r.firstName} {r.lastName}.</p>
      </div>);
  }

  const champ = (label, cle, opts) => {
    const o = opts || {};
    return (
      <div className={`cfg-bloc ${o.large ? 'cfg-bloc-large' : ''}`}>
        <div className="cfg-bloc-label">{label}</div>
        {edition ?
        o.lignes ?
        <textarea className="cfg-textarea cfg-bloc-input" rows={o.lignes} value={form[cle]} onChange={maj(cle)} /> :
        <input className="cfg-input cfg-bloc-input" value={form[cle]} onChange={maj(cle)} /> :
        <div className={`cfg-bloc-val ${o.long ? 'cfg-bloc-long' : ''}`}>{affiche[cle] || <span className="cfg-vide">Non renseigné</span>}</div>}
      </div>);
  };

  return (
    <div className="cfg-live">
      <div className="cfg-live-bar">
        {edition ?
        <React.Fragment>
          <span className="cfg-live-hint"><Icon name="edit" size={13} /> Les modifications seront envoyées à Livana et s'appliqueront aux prochains appels.</span>
          <button className="btn btn-ghost btn-sm" onClick={annuler} disabled={enCours}>Annuler</button>
          <button className="btn btn-primary btn-sm" onClick={enregistrer} disabled={enCours}>
            {enCours ? 'Enregistrement…' : 'Enregistrer'}
          </button>
        </React.Fragment> :
        <React.Fragment>
          {succes && <span className="cfg-live-ok"><Icon name="check" size={14} /> Configuration enregistrée</span>}
          <button className="btn btn-accent btn-sm" onClick={commencerEdition}><Icon name="edit" size={14} /> Modifier</button>
        </React.Fragment>}
      </div>

      {erreur && <div className="cfg-live-err">{erreur}</div>}

      <div className="card panel">
        <div className="panel-head"><h3>Identité de Livana pour {r.firstName}</h3></div>
        <div className="cfg-bloc-grid">
          {champ('Livana se présente comme', 'livanaNom')}
          {champ("Phrase d'accroche", 'phraseDebut', { large: true })}
          {champ('Phrase de fin', 'phraseFin', { large: true })}
          {champ('Personnage incarné', 'livanaIdentite', { large: true, lignes: 8, long: true })}
        </div>
      </div>

      <div className="card panel">
        <div className="panel-head"><h3>Manière de parler</h3></div>
        {champ('Consignes de ton et de conduite de l\'appel', 'maniereDeParler', { large: true, lignes: 10, long: true })}
      </div>

      <div className="card panel">
        <div className="panel-head"><h3>{r.firstName} : identité et informations complémentaires</h3></div>
        <div className="cfg-bloc-grid">
          {champ('Âge', 'age')}
          {/* Libellé d'affichage seulement : le champ Firebase reste `identite_personne` */}
          {champ('Informations complémentaires', 'histoire', { large: true, lignes: 10, long: true })}
        </div>
      </div>

      <div className="card panel">
        <div className="panel-head"><h3>Centres d'intérêt</h3></div>
        <div className="cfg-bloc-grid">
          {champ('Intérêt 1', 'interet1', { large: true })}
          {champ('Intérêt 2', 'interet2', { large: true })}
          {champ('Intérêt 3', 'interet3', { large: true })}
        </div>
      </div>

      {cfg.misAJour &&
      <p className="cfg-card-desc cfg-maj">
        Dernière mise à jour le {cfg.misAJour.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}.
      </p>}
    </div>);
}


function Profile({ resident: r, back, openCall, asstStyle, chatLocked, onUnlockRequest, profileLayout = 'tabs2', initialPrompt = null, onPromptConsumed, dossierLayout = 'simple', initialTab = null }) {
  const lm = lastMoodOf(r);
  const [calming, setCalming] = useStateP(r.calming.slice(0, 3));
  const [editTopics, setEditTopics] = useStateP(false);
  const [newTopic, setNewTopic] = useStateP('');
  const [chartBig, setChartBig] = useStateP(false);
  const [chartPeriod, setChartPeriod] = useStateP('7');
  const [configOpen, setConfigOpen] = useStateP(false);
  const [topicsOpen, setTopicsOpen] = useStateP(false);
  const [directivesOpen, setDirectivesOpen] = useStateP(false);
  const [showAllCalls, setShowAllCalls] = useStateP(false);
  const [histOpen, setHistOpen] = useStateP(false);
  const [histAll, setHistAll] = useStateP(false);
  const [showAllResp, setShowAllResp] = useStateP(false);
  const [reportText, setReportText] = useStateP('');
  const [reportSent, setReportSent] = useStateP(false);
  const [tab, setTab] = useStateP(initialTab || 'chat');
  const seedCfg = (res) => ({
    firstName: res.firstName, lastName: res.lastName, age: res.age,
    identity: res.story || '',
    livanaName: res.livanaName || 'Livana',
    opening: res.opening || "Allô, c'est Livana, comment allez-vous aujourd'hui ?",
    closing: res.closing || 'Je vais vous laisser maintenant, prenez soin de vous, à très bientôt.',
    livanaIdentity: res.livanaIdentity || '',
    speakingNotes: res.speakingNotes || 'Parler doucement et lentement. Vouvoiement systématique. Ton chaleureux et rassurant.'
  });
  const [cfg, setCfg] = useStateP(seedCfg(r));
  const setCfgField = (k, v) => {setCfg((c) => ({ ...c, [k]: v }));r[k === 'identity' ? 'story' : k] = v;};
  const [cfgEditing, setCfgEditing] = useStateP(false);
  const [cfgBackup, setCfgBackup] = useStateP(null);
  const startCfgEdit = () => {setCfgBackup({ cfg: { ...cfg }, calming: calming.slice() });setCfgEditing(true);};
  const saveCfgEdit = () => {setCfgEditing(false);setCfgBackup(null);};
  const cancelCfgEdit = () => {
    if (cfgBackup) {
      setCfg(cfgBackup.cfg);
      Object.keys(cfgBackup.cfg).forEach((k) => {r[k === 'identity' ? 'story' : k] = cfgBackup.cfg[k];});
      setCalming(cfgBackup.calming);r.calming = cfgBackup.calming;
    }
    setCfgEditing(false);setCfgBackup(null);
  };
  React.useEffect(() => {
    setCfg(seedCfg(r));
    setCfgEditing(false);setCfgBackup(null);
  }, [r.id]);
  React.useEffect(() => {setTab(initialTab || 'chat');}, [r.id, initialTab]);
  React.useEffect(() => {setShowAllCalls(false);}, [r.id]);
  React.useEffect(() => {
    if (!showAllCalls) return;
    const h = (e) => {if (e.key === 'Escape' && !document.querySelector('.drawer')) setShowAllCalls(false);};
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [showAllCalls]);
  React.useEffect(() => {setCalming(r.calming.slice(0, 3));setEditTopics(false);setNewTopic('');}, [r.id]);
  React.useEffect(() => {
    if (!chartBig) return;
    const h = (e) => {if (e.key === 'Escape') setChartBig(false);};
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [chartBig]);

  const addTopic = () => {
    const v = newTopic.trim();
    if (!v || calming.length >= 3) return;
    const next = [...calming, v].slice(0, 3);
    setCalming(next);r.calming = next;setNewTopic('');
  };
  const removeTopic = (i) => {
    const next = calming.filter((_, idx) => idx !== i);
    setCalming(next);r.calming = next;
  };
  const updateTopic = (i, val) => {
    const next = calming.map((t, idx) => idx === i ? val.slice(0, 40) : t);
    setCalming(next);r.calming = next;
  };

  const [localPrompt, setLocalPrompt] = useStateP(null);
  const [dossierPrompt, setDossierPrompt] = useStateP(null);
  const chatEl =
  <Assistant mode="embed" pageStyle="chatgpt" fixedResident={r} asstStyle={asstStyle} locked={chatLocked} onUnlockRequest={onUnlockRequest} initialPrompt={localPrompt || initialPrompt} onPromptConsumed={() => {setLocalPrompt(null);if (onPromptConsumed) onPromptConsumed();}}
  suggestions={[
  `📋 Fais-moi une synthèse du dossier de ${r.firstName} sur les 7 derniers jours`,
  `📈 Comment évolue l'humeur de ${r.firstName} ces dernières semaines ?`,
  `🌿 Quels sujets semblent l'apaiser le plus ?`,
  `⚠️ Y a-t-il des signes récurrents d'anxiété ou d'agitation ?`,
  `💬 Qu'est-ce qui ressort des dernières transcriptions d'appels ?`]
  } />;


  // Taux d'apaisement du résident : humeurs de fin analysées, 7 derniers jours.
  // Déclaré avant kpisEl, qui l'utilise dès sa construction.
  const apaisementResident = tauxApaisement(r);

  const kpisEl =
  <div className="kpi-row kpi-row-3">
      <div className="kpi"><div className="kpi-label">Appels réalisés</div><div className="kpi-val">{r.kpi.calls}</div><div className="kpi-sub">au total</div></div>
      <div className="kpi"><div className="kpi-label">Appels / jour</div><div className="kpi-val">{r.kpi.callsPerDay != null ? r.kpi.callsPerDay : r.kpi.calls > 0 ? (3 + r.kpi.calls % 20 / 10).toFixed(1).replace('.', ',') : '—'}</div><div className="kpi-sub">en moyenne</div></div>
      <div className="kpi"><div className="kpi-label">Apaisement</div><div className="kpi-val">{apaisementResident ? apaisementResident.pourcent + '%' : '—'}</div><div className="kpi-sub">{apaisementResident ? 'sur 7 jours' : 'analyse en cours…'}</div></div>
    </div>;


  // Humeurs qualifiées par l'IA : 7 jours sur la fiche, période choisie en grand.
  // Le graphique agrandi n'analyse que lorsqu'il est ouvert (sinon on paierait
  // l'analyse d'une période que personne ne regarde).
  const humeur7j = useMoodAnalysis(r, 7);
  const humeurPeriode = useMoodAnalysis(r, chartBig ? parseInt(chartPeriod, 10) : 0);

  // Historique paginé : on n'analyse QUE les appels réellement affichés
  const PAGE_APPELS = 10;
  const [nbAppelsAffiches, setNbAppelsAffiches] = useStateP(PAGE_APPELS);
  React.useEffect(() => { setNbAppelsAffiches(PAGE_APPELS); }, [r.id, showAllCalls, tab]);
  const appelsVisibles = React.useMemo(() => {
    const listeComplete = tab === 'calls' || showAllCalls;
    return r.calls.slice(0, listeComplete ? nbAppelsAffiches : 3);
  }, [r.id, r.calls.length, tab, showAllCalls, nbAppelsAffiches]);
  const analyseListeEnCours = useAnalyseHumeurs(appelsVisibles);

  const moodCardEl =
  <div className="card panel">
      <div className="panel-head">
        <h3>Évolution de l'humeur</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="eyebrow">7 derniers jours</span>
          <button className="chart-expand-btn" onClick={() => setChartBig(true)} title="Agrandir le graphique" disabled={r.moodTimeline.length === 0}>
            <Icon name="expand" size={15} /> Agrandir
          </button>
        </div>
      </div>
      {humeur7j.analyse ?
      <div className="vig-skel" style={{ padding: '28px 0' }}><span></span><span></span><span></span></div> :
      humeur7j.aucun ?
      <div style={{ padding: '32px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 13 }}>Aucun appel sur les 7 derniers jours.</div> :
      <MoodChart timeline={humeur7j.timeline} />}
    </div>;


  const callsCardEl = (limit) => {
    return (
      <div className="card panel">
      <div className="panel-head">
        <h3>Historique des appels</h3>
        {limit ? <span className="eyebrow">{r.calls.length} appels</span> :
          <button className="btn btn-accent btn-sm" onClick={() => {setLocalPrompt(`Fais une synthèse des derniers jours de ${r.firstName} ${r.lastName} à partir de l'historique des appels : comment a évolué son humeur, quels moments difficiles et qu'est-ce qui l'apaise le plus ?`);setTab('accueil');}}><Icon name="sparkles" size={14} /> Synthèse des appels</button>
          }
      </div>
      {r.calls.length === 0 ?
        <div style={{ padding: '20px 0', color: 'var(--text-3)', fontSize: 13, textAlign: 'center' }}>Aucun appel enregistré — premier appel à programmer.</div> :
        <React.Fragment>
    <div className={`call-list ${limit ? '' : 'call-list-grid'}`}>
          {(limit ? r.calls.slice(0, limit) : r.calls.slice(0, nbAppelsAffiches)).map((c) =>
            <button key={c.id} className="call-item" onClick={() => openCall(c)}>
              <div className="call-item-head">
                <span className="call-when">{c.when}</span>
                <span className="call-dur">{c.duration}</span>
              </div>
              <div className="call-mood-flow" style={{ marginBottom: 9 }}>
                <MoodFlow call={c} />
              </div>
              <div className="call-summary locked">{c.summary}</div>
              <div className="call-item-foot">
                <span className="lock-badge"><Icon name="lock" size={12} /> Résumé &amp; transcription protégés</span>
                <span className="link-btn" style={{ marginLeft: 'auto' }}>Ouvrir <Icon name="chevron-right" size={13} /></span>
              </div>
            </button>
            )}
          {limit ? r.calls.length > limit &&
            <button className="call-more" onClick={() => setTab('calls')}>
              Voir tout l'historique ({r.calls.length}) <Icon name="chevron-right" size={14} />
            </button> :
            r.calls.length > nbAppelsAffiches &&
            <button className="call-more" onClick={() => setNbAppelsAffiches((n) => n + PAGE_APPELS)}>
              {analyseListeEnCours ? 'Analyse en cours…' : `Afficher ${Math.min(PAGE_APPELS, r.calls.length - nbAppelsAffiches)} appels de plus`}
              {' '}<span className="eyebrow">({nbAppelsAffiches}/{r.calls.length})</span>
            </button>}
        </div>
    </React.Fragment>
        }
    </div>);

  };


  // Configuration Livana réelle du résident (Firebase : config_resident/default).
  // Consultable, et modifiable : l'enregistrement écrit dans Firebase via
  // LivanaAPI.updateResidentConfig (set merge — les autres champs sont préservés).
  const configLivanaEl = <ConfigLivanaPanel resident={r} />;

  const configCardsEl = configLivanaEl;


  // Sujet unique demandé par la psychologue (champ `question_psy` de Firebase)
  const questionPsy = (r.config && r.config.questionPsy) || '';

  const questionsCardEl =
  <div className="card panel">
      <div className="panel-head" style={{ display: 'block' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <h3>Sujet que Livana va devoir approfondir</h3>
          <button className="btn btn-ghost btn-sm" onClick={() => setDirectivesOpen(true)}>
            <Icon name="edit" size={14} /> {questionPsy ? 'Modifier le sujet' : 'Définir un sujet'}
          </button>
        </div>
        <p className="suivi-q-sub">Indiquez à Livana un sujet à creuser lors de ses appels. Elle vous transmettra une réponse une fois l'information obtenue, afin d'améliorer le suivi du résident.</p>
      </div>
      {questionPsy ?
    <ol className="suivi-q-list"><li>{questionPsy}</li></ol> :
    <div style={{ fontSize: 13, color: 'var(--text-3)', padding: '4px 2px' }}>Aucun sujet défini. Cliquez sur « Définir un sujet » pour en ajouter un.</div>
    }
    </div>;

  const suiviEl =
  <div className="dir-wrap">
    <div className={`suivi-locked-block ${chatLocked ? 'vig-locked' : ''}`}>
    {chatLocked &&
    <div className="vig-gate">
      <div className="vig-gate-ic"><Icon name="lock" size={24} /></div>
      <div className="vig-gate-title">Contenu protégé</div>
      <div className="vig-gate-sub">Données couvertes par le secret médical. Saisissez votre code à 4 chiffres pour les afficher.</div>
      <button className="btn btn-accent" onClick={onUnlockRequest}><Icon name="lock" size={15} /> Déverrouiller</button>
    </div>
    }
    <div className="suivi-locked-content">
    <div className="suivi-top">
      {questionsCardEl}
    </div>
    </div>
    </div>

    <div className={`suivi-locked-block ${chatLocked ? 'vig-locked' : ''}`}>
    <div className="suivi-locked-content">
    <div className="card panel">
        <div className="panel-head">
          <h3>Historique des sujets approfondis</h3>
          {r.directiveResponses && r.directiveResponses.length > 0 &&
          <button className="btn btn-accent btn-sm" onClick={() => {setLocalPrompt(`À partir des réponses recueillies par Livana auprès de ${r.firstName} ${r.lastName}, qu'est-ce qui ressort ? Aide-moi à les interpréter pour mieux comprendre sa situation.`);setTab('accueil');}}><Icon name="sparkles" size={14} /> Questionner tous les sujets</button>
          }
        </div>
        {r.directiveResponses && r.directiveResponses.length > 0 ?
        <React.Fragment>
        <div className="suivi-answers">
          {(showAllResp ? r.directiveResponses : r.directiveResponses.slice(0, 2)).map((qa, qi) =>
        <div key={qi} className="suivi-qa">
              <div className="suivi-qa-q"><Icon name="message" size={13} /> {qa.q}</div>
              <div className="suivi-qa-a">{qa.a}</div>
              {qa.when && <div className="suivi-qa-when">{qa.when}</div>}
            </div>
        )}
        </div>
        {r.directiveResponses.length > 2 &&
        <button className="rl-more" style={{ marginTop: 12 }} onClick={() => setShowAllResp((v) => !v)}>
          {showAllResp
            ? <React.Fragment><Icon name="chevron-left" size={14} style={{ transform: 'rotate(90deg)' }} /> Réduire</React.Fragment>
            : <React.Fragment><Icon name="history" size={14} /> Afficher les {r.directiveResponses.length - 2} autres retours</React.Fragment>}
        </button>
        }
        </React.Fragment> :
        <div style={{ fontSize: 13, color: 'var(--text-3)', padding: '12px 2px 4px', lineHeight: 1.5 }}>Aucune réponse recueillie pour l'instant. Les retours de Livana apparaîtront ici dès qu'elle aura abordé les sujets à approfondir lors d'un appel.</div>
        }
      </div>
    </div>
    </div>
  </div>;


  const headEl =
  <div className="prof-head prof-head-stats">
      <button className="prof-back" onClick={back}><Icon name="chevron-left" size={18} /></button>
      <Avatar first={r.firstName} last={r.lastName} mood={lm} size={64} className="prof-avatar" />
      <div className="prof-id">
        <div className="prof-name">
          {r.firstName} {r.lastName}
          {r.inCall && <span className="in-call-pill"><span className="in-call-dot"></span>en appel</span>}
        </div>
        <div className="prof-sub">{r.age != null && `${r.age} ans · `}Chambre {r.room}</div>
      </div>
    </div>;


  const modals =
  <React.Fragment>
      {configOpen && <ConfigModal resident={r} onClose={() => setConfigOpen(false)} />}
      {topicsOpen && <TopicsModal resident={r} calming={calming} onClose={() => setTopicsOpen(false)} />}
      {directivesOpen && <DirectivesModal resident={r} onClose={() => setDirectivesOpen(false)} />}

      {histOpen &&
    <div className="chart-modal-backdrop" onMouseDown={(e) => {if (e.target === e.currentTarget) {setHistOpen(false);setReportText('');setReportSent(false);}}}>
        <div className="chart-modal calls-modal">
          <div className="chart-modal-head">
            <div>
              <div className="eyebrow">Retour de Livana</div>
              <div className="chart-modal-title">{r.firstName} {r.lastName} · {r.directiveHistory.length} échanges</div>
            </div>
            <button className="drawer-close" onClick={() => {setHistOpen(false);setReportText('');setReportSent(false);}}><Icon name="x" size={18} /></button>
          </div>
          <div className="calls-modal-body">
            <div className="hist-list">
              {r.directiveHistory.map((h, i) =>
            <div key={i} className="hist-item">
                <div className="hist-date">{h.date}</div>
                <div className="hist-body">
                  <div className="hist-q">{h.q}</div>
                  <div className="hist-a">{h.a}</div>
                </div>
              </div>
            )}
            </div>
          </div>
          <div className="cfg-modal-actions">
            <button className="btn btn-ghost" onClick={() => {setHistOpen(false);}}>Fermer</button>
            <button className="btn btn-accent" onClick={() => {setHistOpen(false);setLocalPrompt(`À partir des retours de Livana sur ${r.firstName} ${r.lastName} (historique des questions ciblées et de leurs réponses), qu'est-ce qui ressort ? Synthétise les éléments clés et propose des pistes de suivi.`);setTab('accueil');}}><Icon name="sparkles" size={14} /> Interroger les retours</button>
          </div>
        </div>
      </div>
    }

      {chartBig &&
    <div className="chart-modal-backdrop" onMouseDown={(e) => {if (e.target === e.currentTarget) setChartBig(false);}}>
          <div className="chart-modal">
            <div className="chart-modal-head">
              <div>
                <div className="eyebrow">Évolution de l'humeur</div>
                <div className="chart-modal-title">
                  {r.firstName} {r.lastName} · {humeurPeriode.nbAppels} appel{humeurPeriode.nbAppels > 1 ? 's' : ''}
                  {humeurPeriode.enCours && <span className="chart-modal-analyse"> · analyse en cours…</span>}
                </div>
              </div>
              <div className="chart-period">
                {/* Périodes bornées à 3 mois : au-delà la courbe devient
                    illisible et l'analyse porterait sur des centaines d'appels. */}
                {[['7', '7 j'], ['14', '14 j'], ['30', '30 j'], ['90', '3 mois']].map(([v, lbl]) =>
            <button key={v} className={`chart-period-btn ${chartPeriod === v ? 'active' : ''}`} onClick={() => setChartPeriod(v)}>{lbl}</button>
            )}
              </div>
              <button className="drawer-close" onClick={() => setChartBig(false)}><Icon name="x" size={18} /></button>
            </div>
            <div className="chart-modal-body">
              {humeurPeriode.aucun ?
              <div style={{ padding: '60px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 13 }}>
                Aucun appel sur cette période.
              </div> :
              <MoodChart timeline={humeurPeriode.timeline} big />}
            </div>
          </div>
        </div>
    }

      {showAllCalls &&
    <div className="chart-modal-backdrop" onMouseDown={(e) => {if (e.target === e.currentTarget) setShowAllCalls(false);}}>
          <div className="chart-modal calls-modal">
            <div className="chart-modal-head">
              <div>
                <div className="eyebrow">Historique des appels</div>
                <div className="chart-modal-title">
                  {r.firstName} {r.lastName} · {r.calls.length} appels
                  {analyseListeEnCours && <span className="chart-modal-analyse"> · analyse en cours…</span>}
                </div>
              </div>
              <button className="drawer-close" onClick={() => setShowAllCalls(false)}><Icon name="x" size={18} /></button>
            </div>
            <div className="calls-modal-body">
              <div className="call-list">
                {r.calls.slice(0, nbAppelsAffiches).map((c) =>
            <button key={c.id} className="call-item" onClick={() => openCall(c)}>
                    <div className="call-item-head">
                      <span className="call-when">{c.when}</span>
                      <span className="call-dur">{c.duration}</span>
                    </div>
                    <div className="call-mood-flow" style={{ marginBottom: 9 }}>
                      <MoodFlow call={c} />
                    </div>
                    <div className="call-summary locked">{c.summary}</div>
                    <div className="call-item-foot">
                      <span className="lock-badge"><Icon name="lock" size={12} /> Résumé &amp; transcription protégés</span>
                      <span className="link-btn" style={{ marginLeft: 'auto' }}>Ouvrir <Icon name="chevron-right" size={13} /></span>
                    </div>
                  </button>
            )}
                {r.calls.length > nbAppelsAffiches &&
            <button className="call-more" onClick={() => setNbAppelsAffiches((n) => n + PAGE_APPELS)}>
                  {analyseListeEnCours ? 'Analyse en cours…' : `Afficher ${Math.min(PAGE_APPELS, r.calls.length - nbAppelsAffiches)} appels de plus`}
                  {' '}<span className="eyebrow">({nbAppelsAffiches}/{r.calls.length})</span>
                </button>}
              </div>
            </div>
          </div>
        </div>
    }
    </React.Fragment>;


  // ── Disposition Tweak : tout-en-chat ──
  if (profileLayout === 'fullchat') {
    const moodLabels = (r.moodTimeline || []).slice(-3).map((m) => window.moodOf(m.mood).label).join(' → ');
    // Le sujet demandé par la psychologue devient une suggestion de question
    const sujetPsy = (r.config && r.config.questionPsy) ? [r.config.questionPsy] : [];
    const suggestions = [
    "Synthèse des dernières 48h : émotions, ce qui l'agite, ce qui l'apaise",
    ...sujetPsy,
    "Comment a évolué son humeur ces 7 derniers jours ?",
    "Que ressort-il des dernières transcriptions d'appels ?"];

    return (
      <div className="page page-profile page-fullchat fade-up">
        {headEl}
        <div className="fullchat-wrap">
          <Assistant
            mode="embed" pageStyle="chatgpt" fixedResident={r}
            asstStyle={asstStyle} locked={chatLocked} onUnlockRequest={onUnlockRequest}
            suggestions={suggestions}
            topBanner={
            <div className="fullchat-kpis">
                <div className="fc-kpi"><span className="fc-kpi-val">{r.kpi.calls}</span><span className="fc-kpi-lbl">Appels réalisés</span></div>
                <div className="fc-kpi"><span className="fc-kpi-val">{r.kpi.callsPerDay != null ? r.kpi.callsPerDay : r.kpi.calls > 0 ? (3 + r.kpi.calls % 20 / 10).toFixed(1).replace('.', ',') : '—'}</span><span className="fc-kpi-lbl">Appels / jour</span></div>
                <div className="fc-kpi"><span className="fc-kpi-val">{apaisementResident ? apaisementResident.pourcent + '%' : '—'}</span><span className="fc-kpi-lbl">Apaisement 7 j</span></div>
                <button className="fc-kpi-action" onClick={() => setDirectivesOpen(true)}><Icon name="settings" size={15} /> Questions ciblées</button>
              </div>
            } />
          
        </div>
        {modals}
      </div>);
  }

  // ── Disposition par défaut : 2 onglets (Accueil + Configuration) ──
  if (profileLayout === 'tabs2' || profileLayout !== 'tabs' && profileLayout !== 'rail') {
    const isConfig = tab === 'config';
    const isDir = tab === 'directives';
    const isCalls = tab === 'calls';
    return (
      <div className="page page-profile fade-up">
        {headEl}

        <div className="prof-tabs" role="tablist">
          <button className={`prof-tab ${!isConfig && !isCalls && !isDir ? 'active' : ''}`} onClick={() => setTab('accueil')}>
            <Icon name="home" size={16} /> Accueil
          </button>
          <button className={`prof-tab ${isDir ? 'active' : ''}`} onClick={() => setTab('directives')}>
            <Icon name="people-talk" size={16} /> Sujet à approfondir
          </button>
          <button className={`prof-tab ${isCalls ? 'active' : ''}`} onClick={() => setTab('calls')}>
            <Icon name="history" size={16} /> Historique d'appels
          </button>
          <button className={`prof-tab ${isConfig ? 'active' : ''}`} onClick={() => setTab('config')}>
            <Icon name="settings" size={16} /> Configuration des appels
          </button>
        </div>

        {isConfig ?
        <div className="prof-tabpane fade-up">{configCardsEl}</div> :
        isDir ?
        <div className="prof-tabpane fade-up">{suiviEl}</div> :
        isCalls ?
        <div className="prof-tabpane fade-up">{callsCardEl(0)}</div> :

        <div className="prof-tabpane fade-up">
            <div className="prof-grid prof-grid-chat">
              <div className="prof-chat-col">{chatEl}</div>
              <div className="prof-col prof-rail">
                {kpisEl}
                <ApaisementCard resident={r} locked={chatLocked} onUnlockRequest={onUnlockRequest} />
                {moodCardEl}
                {callsCardEl(3)}
              </div>
            </div>
          </div>
        }

        {modals}
      </div>);

  }

  // ── Disposition Tweak : chat en hero + rail latéral ──
  if (profileLayout === 'rail') {
    return (
      <div className="page fade-up">
        {headEl}
        <div className="prof-grid prof-grid-chat">
          <div className="prof-chat-col">{chatEl}</div>
          <div className="prof-col prof-rail">
            {kpisEl}
            <div className="card panel cfg-card">
              <div className="panel-head"><h3>Configuration de l'appel</h3></div>
              <div className="cfg-btns">
                <button className="cfg-btn" onClick={() => setConfigOpen(true)}>
                  <span className="cfg-btn-ic"><Icon name="user-circle" size={20} /></span>
                  <span className="cfg-btn-tx">
                    <span className="cfg-btn-title">Personnalité</span>
                    <span className="cfg-btn-sub">{r.firstName} &amp; Livana</span>
                  </span>
                  <Icon name="chevron-right" size={16} stroke="var(--text-3)" />
                </button>
                <button className="cfg-btn" onClick={() => setTopicsOpen(true)}>
                  <span className="cfg-btn-ic"><Icon name="message" size={19} /></span>
                  <span className="cfg-btn-tx">
                    <span className="cfg-btn-title">Centres d'intérêt</span>
                    <span className="cfg-btn-sub">Sujets de conversation</span>
                  </span>
                  <Icon name="chevron-right" size={16} stroke="var(--text-3)" />
                </button>
              </div>
            </div>
            {moodCardEl}
            {callsCardEl(3)}
          </div>
        </div>
        {modals}
      </div>);

  }

  // ── Variante Tweak : 3 onglets ──
  return (
    <div className="page page-profile fade-up">
      {headEl}

      <div className="prof-tabs" role="tablist">
        <button className={`prof-tab ${tab === 'chat' ? 'active' : ''}`} onClick={() => setTab('chat')}>
          <Icon name="message" size={16} /> Livana Copilot
        </button>
        <button className={`prof-tab ${tab === 'mood' ? 'active' : ''}`} onClick={() => setTab('mood')}>
          <Icon name="activity" size={16} /> Évolution de l'humeur
        </button>
        <button className={`prof-tab ${tab === 'config' ? 'active' : ''}`} onClick={() => setTab('config')}>
          <Icon name="settings" size={16} /> Configuration des appels
        </button>
      </div>

      {tab === 'chat' &&
      <div className="prof-tabpane prof-pane-chat fade-up">{chatEl}</div>
      }

      {tab === 'mood' &&
      <div className="prof-tabpane fade-up">
          {kpisEl}
          <div style={{ marginTop: 16 }}>{moodCardEl}</div>
          <div style={{ marginTop: 16 }}>{callsCardEl(0)}</div>
        </div>
      }

      {tab === 'config' &&
      <div className="prof-tabpane fade-up">{configCardsEl}</div>
      }

      {modals}
    </div>);

}

window.Profile = Profile;