// features/debriefs/Debriefs.jsx — les points dictés par l'équipe soignante
// ---------------------------------------------------------------
// L'infirmière coordinatrice appelle Livana, compose « 0000 », et dicte.
// Livana ne lui répond pas : ni modèle de langage, ni voix de synthèse,
// seulement la transcription. Ce que la psychologue lit ici est donc la
// parole d'une collègue, pas un échange avec un résident — d'où une page
// à part, et non un onglet de l'historique d'appels.
//
// Contenu de santé : il passe par le verrou PIN comme les transcriptions.

const { useState: useStateD } = React;

// « aujourd'hui · 8 h 12 », plutôt qu'une date complète : un debrief se lit
// le jour même, et sa fraîcheur est l'information principale.
function quandD(ts) {
  if (!ts || !ts.toDate) return '—';
  const d = ts.toDate();
  const jour = new Date(d.getFullYear(), d.getMonth(), d.getDate());
  const auj = new Date();
  const zero = new Date(auj.getFullYear(), auj.getMonth(), auj.getDate());
  const ecart = Math.round((zero - jour) / 86400000);
  const heure = d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }).replace(':', ' h ');
  if (ecart === 0) return `aujourd'hui · ${heure}`;
  if (ecart === 1) return `hier · ${heure}`;
  return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' }) + ' · ' + heure;
}

function dureeD(s) {
  if (!s && s !== 0) return null;
  const m = Math.floor(s / 60);
  const r = s % 60;
  return m ? `${m} min ${String(r).padStart(2, '0')}` : `${r} s`;
}

// Le badge que la psychologue cherche en premier : le point du matin n'a
// pas le meme poids que celui du soir.
function momentD(ts) {
  if (!ts || !ts.toDate) return null;
  const h = ts.toDate().getHours();
  if (h < 12) return 'Matin';
  if (h < 18) return 'Après-midi';
  return 'Soir';
}

function Debriefs({ locked, onUnlockRequest, onQuestionner }) {
  const liste = window.DEBRIEFS || [];
  const [ouvert, setOuvert] = useStateD(null);

  // Ouvrir vaut lecture. On ne marque QUE si le verrou est levé : sinon on
  // éteindrait la pastille sans que personne n'ait rien pu lire.
  const ouvrir = (d) => {
    const suivant = ouvert === d.id ? null : d.id;
    setOuvert(suivant);
    if (suivant && !d.lu_le && !locked) {
      window.LivanaAPI.marquerDebriefLu(d.id).catch((e) =>
        console.warn('Accusé de lecture non enregistré :', e && e.code));
    }
  };

  // Meme en-tete que la page Residents : un h2 et son sous-titre. Le
  // decompte des non-lus y est repris — c'est la reponse a « qu'est-ce
  // que j'ai rate ? », la question qui amene ici.
  const nonLus = liste.filter((d) => !d.lu_le).length;
  const entete = (
    <div className="res-toolbar">
      <div>
        <h2 className="res-toolbar-title">Debriefs de l'équipe</h2>
        <p className="res-toolbar-sub">
          {!liste.length
            ? "Dictés par l'équipe soignante"
            : nonLus
              ? `${nonLus} non lu${nonLus > 1 ? 's' : ''} sur ${liste.length}`
              : `${liste.length} debrief${liste.length > 1 ? 's' : ''}, tous lus`}
        </p>
      </div>
      {liste.length > 0 && onQuestionner && (
        <button className="btn btn-accent" onClick={onQuestionner}>
          <Icon name="sparkles" size={15} /> Questionner les debriefs
        </button>
      )}
    </div>
  );

  if (!liste.length) {
    return (
      <div className="page fade-up">
        {entete}
        <div className="card deb-vide">
          <span className="deb-vide-ic"><Icon name="clipboard" size={26} /></span>
          <div className="deb-vide-t">Aucun debrief pour l'instant</div>
          <p className="deb-vide-p">
            L'équipe soignante peut dicter un point en appelant Livana et en composant
            <strong> 0000</strong> à la place d'un numéro de chambre. Livana écoute sans
            répondre, puis vous transmet ce qui a été dit.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="page fade-up">
      {entete}

      <div className="deb-liste">
        {liste.map((d, i) => {
          const dep = ouvert === d.id;
          const premier = i === 0;
          return (
            <div key={d.id} className={`card deb-item ${d.lu_le ? '' : 'neuf'}`}>
              <div className="deb-tete">
                {!d.lu_le && <span className="deb-point" title="Non lu"></span>}
                <span className="deb-ic"><Icon name="clipboard" size={17} /></span>
                <span className="deb-titre">
                  {quandD(d.cree_le)}
                  {dureeD(d.duree) && <span className="deb-duree"> · {dureeD(d.duree)}</span>}
                </span>
                {momentD(d.cree_le) && <span className="deb-badge">{momentD(d.cree_le)}</span>}
              </div>

              {/* Cliquer le flou ouvre la saisie du code, comme sur les
                  appels recents : le contenu masque EST l'affordance. La
                  pastille ne s'affiche que sur le premier — repetee sur
                  chaque carte, elle deviendrait du bruit. */}
              <div
                className={`deb-corps ${locked ? 'verrouille' : ''}`}
                onClick={locked ? onUnlockRequest : undefined}
                role={locked ? 'button' : undefined}
                tabIndex={locked ? 0 : -1}>
                {/* La synthese dans sa boite, signee par qui l'a produite :
                    un modele, pas la collegue. La dictee en dessous fait foi. */}
                <div className="deb-syn">
                  <span className="deb-syn-puce"><Icon name="sparkles" size={12} /> Synthèse de Livana</span>
                  <p className={`deb-resume ${locked ? 'locked' : ''}`}>{d.resume || '—'}</p>
                </div>
                {locked && premier && (
                  <span className="recent-call-unlock"><Icon name="lock" size={13} /> Déverrouiller</span>
                )}

                {!locked && (
                  <button className="deb-afficher" onClick={() => ouvrir(d)}>
                    <span className={`deb-aff-chev ${dep ? 'ouvert' : ''}`}><Icon name="chevron-down" size={13} /></span>
                    {dep ? 'Masquer ce qui a été dit' : 'Afficher ce qui a été dit'}
                  </button>
                )}

                {dep && (
                  <div className="deb-verb">
                    <span className="deb-quote">“</span>
                    <p className={`deb-verbatim ${locked ? 'locked' : ''}`}>
                      {d.transcription || 'Transcription indisponible.'}
                    </p>
                    <p className="deb-sig">— dicté par l'équipe soignante</p>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.Debriefs = Debriefs;