// features/accueil — page « Réponses ciblées »

const { useState: useStateRp } = React;

// ───────────────────────── Réponses ciblées ─────────────────────────
function Responses({ openProfile, locked, onUnlockRequest }) {
  const all = window.RESIDENTS.filter((r) => r.directiveResponses && r.directiveResponses.length > 0);
  const [seen, setSeen] = useStateRp([]);
  const residents = all.filter((r) => !seen.includes(r.id));
  const total = residents.reduce((n, r) => n + r.directiveResponses.length, 0);
  const [sel, setSel] = useStateRp(all[0] ? all[0].id : null);
  const active = residents.find((r) => r.id === sel) || residents[0];
  const markSeen = (id) => {
    const next = [...seen, id];
    const remaining = all.filter((r) => !next.includes(r.id));
    setSeen(next);
    setSel(remaining[0] ? remaining[0].id : null);
  };

  return (
    <div className="page fade-up">
      <div className={`resp2 ${locked ? 'vig-locked' : ''}`}>
        {locked &&
        <div className="vig-gate">
          <div className="vig-gate-ic"><Icon name="lock" size={24} /></div>
          <div className="vig-gate-title">Réponses protégées</div>
          <div className="vig-gate-sub">Ces données relèvent du secret médical. Saisissez votre code à 4&nbsp;chiffres pour les afficher.</div>
          <button className="btn btn-accent" onClick={onUnlockRequest}><Icon name="lock" size={15} /> Déverrouiller</button>
        </div>
        }

        <aside className="resp2-list">
          <div className="resp2-list-head">
            <span className="vig-orb"></span>
            <div>
              <div className="resp2-list-title">Ce que Livana a appris</div>
              <div className="resp2-list-sub">{total} réponses · {residents.length} résidents</div>
            </div>
          </div>
          {residents.map((r) => (
            <button key={r.id} className={`resp2-item ${active && r.id === active.id ? 'active' : ''}`} onClick={() => setSel(r.id)}>
              <Avatar first={r.firstName} last={r.lastName} mood={r.moodTimeline.slice(-1)[0]?.mood} size={36} />
              <span className="resp2-item-id">
                <span className="resp2-item-name">{r.firstName} {r.lastName}</span>
                <span className="resp2-item-room">Chambre {r.room}</span>
              </span>
              <span className="resp2-item-count">{r.directiveResponses.length}</span>
            </button>
          ))}
          {residents.length === 0 &&
          <div className="resp2-empty"><Icon name="check" size={15} /> Toutes les réponses ont été consultées.</div>
          }
        </aside>

        {active ?
        <section className="resp2-detail card panel">
          <div className="resp2-detail-head">
            <Avatar first={active.firstName} last={active.lastName} mood={active.moodTimeline.slice(-1)[0]?.mood} size={46} />
            <div className="resp2-detail-id">
              <div className="resp2-detail-name">{active.firstName} {active.lastName}</div>
              <div className="resp2-detail-meta">{active.age != null && `${active.age} ans · `}Chambre {active.room} · {active.directiveResponses.length} réponse{active.directiveResponses.length > 1 ? 's' : ''}</div>
            </div>
            <div className="resp2-detail-actions">
              <button className="btn btn-soft btn-sm" onClick={() => openProfile(active, null, 'directives')}>Voir le dossier</button>
              <button className="btn btn-accent btn-sm" onClick={() => openProfile(active, `Peux-tu approfondir les réponses aux questions ciblées de ${active.firstName} ${active.lastName} et m'aider à mieux comprendre sa situation ?`, 'directives')}><Icon name="sparkles" size={14} /> Approfondir</button>
            </div>
          </div>
          <div className="resp2-qa-list">
            {active.directiveResponses.map((qa, i) => (
              <div key={i} className="resp2-qa">
                <div className="resp2-qa-q">{qa.q}</div>
                <div className="resp2-qa-a">{qa.a}</div>
                {qa.when && <div className="resp2-qa-when"><Icon name="phone" size={11} /> Recueillie · {qa.when}</div>}
              </div>
            ))}
          </div>
          <div className="resp2-detail-foot">
            <button className="btn btn-ghost btn-sm" onClick={() => markSeen(active.id)}><Icon name="check" size={14} /> J'ai tout vu</button>
          </div>
        </section> :
        <section className="resp2-detail card panel resp2-detail-empty">
          <div className="resp2-done-ic"><Icon name="check" size={30} /></div>
          <div className="resp2-done-title">Tout est à jour</div>
          <div className="resp2-done-sub">Vous avez consulté toutes les réponses recueillies par Livana. Les nouvelles apparaîtront ici après les prochains appels.</div>
        </section>
        }
      </div>
    </div>);

}

window.Responses = Responses;