// features/dossier — onglet « Dossier » de la fiche résident
// Deux sections : les consignes d'apaisement réellement transmises aux
// aides-soignants (alimentées par ApaisementCard), et les notes libres de
// la psychologue.
//
// ⚠️ TEMPORAIRE — même statut que le cache d'apaisement : tout vit dans le
// navigateur, le temps de la démo. Les notes sont du texte clinique écrit
// par la psychologue ; elles doivent partir vers Firestore (chiffrées, selon
// la spec du CLAUDE.md racine) avant tout usage réel. Sans cela, elles ne
// suivent pas d'un poste à l'autre et disparaissent au vidage du navigateur.

const CLE_CACHE_NOTES = 'livana.notes';
const CACHE_NOTES = (() => {
  try { return JSON.parse(window.localStorage.getItem(CLE_CACHE_NOTES)) || {}; }
  catch (e) { return {}; }
})(); // { residentId: [{ id, texte, quand, qui }] }

function sauverNotes() {
  try { window.localStorage.setItem(CLE_CACHE_NOTES, JSON.stringify(CACHE_NOTES)); }
  catch (e) { /* quota plein ou stockage refusé : les notes restent en mémoire */ }
}

// Lues par le contexte du chatbot (buildResidentContext) : sans cela, Livana
// répondrait « je n'ai pas cette information » à une question portant sur des
// notes que la psychologue a pourtant sous les yeux.
window.LIVANA_NOTES = {
  liste: (residentId) => (CACHE_NOTES[residentId] || []).slice(),
};

// Se greffe sur les purges déjà en place (humeurs, apaisement) au lieu de
// les écraser : aucune donnée d'un compte ne doit survivre au suivant.
const purgeAvantNotes = window.LIVANA_PURGE_CACHES;
window.LIVANA_PURGE_CACHES = function () {
  if (purgeAvantNotes) purgeAvantNotes();
  Object.keys(CACHE_NOTES).forEach((k) => delete CACHE_NOTES[k]);
  try { window.localStorage.removeItem(CLE_CACHE_NOTES); } catch (e) {}
};

const MOIS_DOSSIER = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];
function quandFr(d) {
  return `${d.getDate()} ${MOIS_DOSSIER[d.getMonth()]}, ${String(d.getHours()).padStart(2, '0')} h ${String(d.getMinutes()).padStart(2, '0')}`;
}

function DossierResident({ resident: r, locked = false, onUnlockRequest, onQuestionner }) {
  const [, redessiner] = React.useState(0);
  const rafraichir = () => redessiner((n) => n + 1);
  const [brouillon, setBrouillon] = React.useState('');       // note de suivi
  const [consigne, setConsigne] = React.useState('');         // consigne à transmettre
  // Les champs d'écriture restent repliés : on ouvre cet onglet pour relire,
  // pas pour écrire. Ils se déplient à la demande et se referment après envoi.
  const [ouvreConsigne, setOuvreConsigne] = React.useState(false);
  const [ouvreNote, setOuvreNote] = React.useState(false);
  const [suppr, setSuppr] = React.useState(null); // { type: 'consigne'|'ligne'|'note', id, index }
  const [edit, setEdit] = React.useState(null);   // { type: 'ligne'|'note', id, index, valeur }

  React.useEffect(() => {
    setBrouillon(''); setConsigne(''); setSuppr(null); setEdit(null);
    setOuvreConsigne(false); setOuvreNote(false);
  }, [r.id]);

  const consignes = (window.LIVANA_APAIS ? window.LIVANA_APAIS.journal(r.id) : []).slice().reverse();
  const notes = (CACHE_NOTES[r.id] || []).slice().reverse();

  const ajouterNote = () => {
    const texte = brouillon.trim();
    if (!texte) return;
    const psy = window.PSY || {};
    CACHE_NOTES[r.id] = (CACHE_NOTES[r.id] || []).concat({
      id: `n${Date.now()}`,
      texte: texte,
      quand: quandFr(new Date()),
      qui: `${psy.firstName || ''} ${psy.lastName || ''}`.trim() || 'la psychologue',
    });
    sauverNotes();
    setBrouillon('');
    setOuvreNote(false);
    rafraichir();
  };

  const supprimerNote = (id) => {
    CACHE_NOTES[r.id] = (CACHE_NOTES[r.id] || []).filter((n) => n.id !== id);
    sauverNotes();
    setSuppr(null);
    rafraichir();
  };

  const modifierNote = () => {
    const texte = (edit.valeur || '').trim();
    if (!texte) return;
    const liste = CACHE_NOTES[r.id] || [];
    const n = liste.filter((x) => x.id === edit.id)[0];
    if (n) { n.texte = texte; sauverNotes(); }
    setEdit(null);
    rafraichir();
  };

  const transmettreConsigne = () => {
    if (!consigne.trim() || !window.LIVANA_APAIS) return;
    window.LIVANA_APAIS.ajouter(r.id, consigne);
    setConsigne('');
    setOuvreConsigne(false);
    rafraichir();
  };

  const supprimerConsigne = (id) => {
    if (window.LIVANA_APAIS) window.LIVANA_APAIS.supprimer(r.id, id);
    setSuppr(null);
    rafraichir();
  };

  // Retouche d'une consigne seule à l'intérieur d'un envoi. Texte vide =
  // suppression de la ligne ; le dernier retrait efface l'envoi entier.
  const ecrireLigne = (id, index, texte) => {
    if (window.LIVANA_APAIS) window.LIVANA_APAIS.modifierLigne(r.id, id, index, texte);
    setEdit(null);
    setSuppr(null);
    rafraichir();
  };

  const enEdition = (type, id, index) =>
  edit && edit.type === type && edit.id === id && edit.index === index;
  const enSuppression = (type, id, index) =>
  suppr && suppr.type === type && suppr.id === id && suppr.index === index;

  // Suppression en deux temps : ce sont des écrits cliniques, un clic isolé
  // ne doit pas les effacer. Même principe que la corbeille du tiroir d'appel.
  const confirmSuppr = (surConfirme) => (
    <span className="doss-confirm">
      Supprimer ?
      <button className="doss-confirm-oui" onClick={surConfirme}>Oui</button>
      <button className="doss-confirm-non" onClick={() => setSuppr(null)}>Non</button>
    </span>);

  const boutonSuppr = (type, id, surConfirme, index) => (
    enSuppression(type, id, index) ? confirmSuppr(surConfirme) :
    <button className="doss-suppr" title="Supprimer" onClick={() => setSuppr({ type: type, id: id, index: index })}>
      <Icon name="trash" size={14} />
    </button>
  );

  const boutonEditer = (type, id, index, valeur) => (
    <button className="doss-editer" title="Modifier"
      onClick={() => { setSuppr(null); setEdit({ type: type, id: id, index: index, valeur: valeur }); }}>
      <Icon name="edit" size={13} />
    </button>
  );

  // Le contenu est construit une seule fois ; verrouillé, il est rendu
  // flouté et inerte sous le calque (classes .cfg-verrou, mêmes que
  // l'onglet Configuration). L'ancienne version affichait une
  // carte-croupion à la place du dossier : l'écran verrouillé ne
  // ressemblait pas à l'écran qu'il protège.
  const contenu = (
    <div className="prof-grid doss-grid">
      {/* ── Ce qui part vers l'équipe ── */}
      <div className="card panel doss-card doss-sortant">
        <div className="doss-chapeau">
          <span className="doss-chapeau-ic"><Icon name="send" size={15} /></span>
          <div className="panel-head">
            <h3>Transmis aux aides-soignants</h3>
            {consignes.length > 0 && <span className="eyebrow">{consignes.length} envoi{consignes.length > 1 ? 's' : ''}</span>}
          </div>
        </div>
        <p className="apais-intro">
          Ces consignes sont sorties de votre espace : l'équipe les applique au chevet.
        </p>
        {/* Écrire une consigne sans passer par Livana : ce que la psychologue
            a observé elle-même n'a aucune raison de transiter par l'IA.
            Le champ reste replié — on vient d'abord relire ce qui est parti. */}
        <div className="doss-boutons">
          <button className={`doss-plier doss-plier-sortant ${ouvreConsigne ? 'est-ouvert' : ''}`}
            onClick={() => setOuvreConsigne(!ouvreConsigne)}>
            <Icon name={ouvreConsigne ? 'x' : 'plus'} size={14} />
            {ouvreConsigne ? 'Annuler' : 'Écrire une consigne'}
          </button>
        </div>
        {ouvreConsigne &&
        <div className="doss-saisie">
          <textarea
            className="doss-champ" rows={2} autoFocus
            placeholder={`Une consigne à transmettre à l'équipe pour ${r.firstName}…`}
            value={consigne}
            onChange={(e) => setConsigne(e.target.value)}
            onKeyDown={(e) => {
              // Entrée transmet, Maj + Entrée passe à la ligne : une consigne
              // tient en une phrase, l'aller-retour vers la souris est du temps perdu.
              if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); transmettreConsigne(); }
              if (e.key === 'Escape') { setConsigne(''); setOuvreConsigne(false); }
            }} />
            <div className="doss-saisie-pied">
              <span className="doss-astuce">Entrée pour transmettre · Maj + Entrée pour aller à la ligne</span>
              <button className="btn btn-accent btn-sm" onClick={transmettreConsigne} disabled={!consigne.trim()}>
                <Icon name="send" size={14} /> Transmettre
              </button>
            </div>
          </div>}
        {consignes.length === 0 ?
        <p className="doss-vide">Rien n'a encore été transmis.</p> :
        <div className="doss-liste">{consignes.map((c) =>
          <div key={c.id} className="doss-entree">
              <div className="doss-entree-head">
                <span className="doss-quand"><Icon name="send" size={12} /> {c.quand}</span>
                {/* D'où vient la consigne : une suggestion de Livana n'a pas
                    le même poids qu'une observation écrite par la psychologue. */}
                <span className={`doss-origine ${c.origine === 'psy' ? 'est-psy' : ''}`}>
                  {c.origine === 'psy' ? 'écrite par vous' : 'd’après Livana'}
                </span>
                <span className="doss-entree-actions">
                  {boutonSuppr('consigne', c.id, () => supprimerConsigne(c.id))}
                </span>
              </div>
              <ul className="doss-sujets">{(c.suggestions || []).map((s, i) =>
              <li key={i} className="doss-sujet">
                {enEdition('ligne', c.id, i) ?
                <div className="doss-ligne-edit">
                    <input className="doss-champ doss-champ-ligne" autoFocus value={edit.valeur}
                    onChange={(e) => setEdit(Object.assign({}, edit, { valeur: e.target.value }))}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') ecrireLigne(c.id, i, edit.valeur);
                      if (e.key === 'Escape') setEdit(null);
                    }} />
                    <div className="doss-ligne-edit-btns">
                      <button className="btn btn-accent btn-sm" onClick={() => ecrireLigne(c.id, i, edit.valeur)}
                      disabled={!edit.valeur.trim()}>Enregistrer</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEdit(null)}>Annuler</button>
                    </div>
                  </div> :
                <React.Fragment>
                    <span className="doss-sujet-tx">{s}</span>
                    <span className="doss-sujet-actions">
                      {enSuppression('ligne', c.id, i) ?
                    confirmSuppr(() => ecrireLigne(c.id, i, '')) :
                    <React.Fragment>
                          {boutonEditer('ligne', c.id, i, s)}
                          {boutonSuppr('ligne', c.id, () => ecrireLigne(c.id, i, ''), i)}
                        </React.Fragment>}
                    </span>
                  </React.Fragment>}
              </li>
            )}</ul>
            </div>
        )}</div>}
      </div>

      {/* ── Ce qui ne sort jamais de l'écran ── */}
      <div className="card panel doss-card doss-prive">
        <div className="doss-chapeau">
          <span className="doss-chapeau-ic"><Icon name="lock" size={15} /></span>
          <div className="panel-head">
            <h3>Notes privées</h3>
            {notes.length > 0 && <span className="eyebrow">{notes.length} note{notes.length > 1 ? 's' : ''}</span>}
          </div>
        </div>
        <p className="apais-intro">
          Rien ici ne quitte votre espace. Livana peut les relire pour vous répondre.
        </p>
        <div className="doss-boutons">
          <button className={`doss-plier doss-plier-prive ${ouvreNote ? 'est-ouvert' : ''}`}
            onClick={() => setOuvreNote(!ouvreNote)}>
            <Icon name={ouvreNote ? 'x' : 'plus'} size={14} />
            {ouvreNote ? 'Annuler' : 'Ajouter une note'}
          </button>
          {notes.length > 0 && onQuestionner &&
          <button className="doss-questionner"
            onClick={() => onQuestionner(`[PREFILL]Dans mes notes de suivi sur ${r.firstName} ${r.lastName}, qu'est-ce que j'ai écrit à propos de `)}>
              <Icon name="sparkles" size={14} /> Questionner mes notes
            </button>}
        </div>
        {ouvreNote &&
        <div className="doss-saisie">
          <textarea
            className="doss-champ" rows={3} autoFocus
            placeholder={`Ce que vous avez observé chez ${r.firstName}, une consigne à retenir, un point à revoir…`}
            value={brouillon}
            onChange={(e) => setBrouillon(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ajouterNote(); }
              if (e.key === 'Escape') { setBrouillon(''); setOuvreNote(false); }
            }} />
            <div className="doss-saisie-pied">
              <span className="doss-astuce">Entrée pour ajouter · Maj + Entrée pour aller à la ligne</span>
              <button className="btn btn-accent btn-sm" onClick={ajouterNote} disabled={!brouillon.trim()}>
                <Icon name="plus" size={14} /> Ajouter la note
              </button>
            </div>
          </div>}
        {notes.length === 0 ?
        <p className="doss-vide">Aucune note pour l'instant.</p> :
        <div className="doss-liste">{notes.map((n) =>
          <div key={n.id} className="doss-entree doss-note">
              <div className="doss-entree-head">
                <span className="doss-quand"><Icon name="calendar" size={12} /> {n.quand}</span>
                {enEdition('note', n.id, null) ? null :
              <span className="doss-entree-actions">
                    {boutonEditer('note', n.id, null, n.texte)}
                    {boutonSuppr('note', n.id, () => supprimerNote(n.id), undefined)}
                  </span>}
              </div>
              {enEdition('note', n.id, null) ?
            <div className="doss-ligne-edit">
                  <textarea className="doss-champ" rows={3} autoFocus value={edit.valeur}
                onChange={(e) => setEdit(Object.assign({}, edit, { valeur: e.target.value }))}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); modifierNote(); }
                  if (e.key === 'Escape') setEdit(null);
                }} />
                  <div className="doss-ligne-edit-btns">
                    <button className="btn btn-accent btn-sm" onClick={modifierNote} disabled={!edit.valeur.trim()}>Enregistrer</button>
                    <button className="btn btn-ghost btn-sm" onClick={() => setEdit(null)}>Annuler</button>
                  </div>
                </div> :
            <p className="doss-note-tx">{n.texte}</p>}
            </div>
        )}</div>}
      </div>
    </div>);

  if (locked) {
    return (
      <div className="cfg-verrou est-verrouille">
        <div className="vig-gate">
          <div className="vig-gate-ic"><Icon name="lock" size={22} /></div>
          <div className="vig-gate-title">Dossier protégé</div>
          <div className="vig-gate-sub">Saisissez votre code à 4 chiffres pour afficher les consignes transmises et les notes de suivi.</div>
          <button className="btn btn-accent btn-sm" onClick={onUnlockRequest}><Icon name="lock" size={14} /> Déverrouiller</button>
        </div>
        {contenu}
      </div>);
  }

  return contenu;
}

window.DossierResident = DossierResident;