// features/residents — liste/grille des résidents

const { useState: useStateLs } = React;

// ───────────────────────── Résidents list ─────────────────────────
function Residents({ openProfile, query, layout, cardStyle }) {
  const [filter, setFilter] = useStateLs('all');
  const [view, setView] = useStateLs('grid');
  const [addOpen, setAddOpen] = useStateLs(false);
  const [draft, setDraft] = useStateLs(window.RESIDENT_DRAFT || null);

  // Le taux d'apaisement du tableau s'appuie sur les humeurs de fin analysées
  // des 7 derniers jours (même jeu d'appels que l'accueil : déjà en cache).
  const appels7j = React.useMemo(() => appels7jDe(window.RESIDENTS), [window.LIVANA_DATA_VERSION]);
  useAnalyseHumeurs(appels7j);

  let list = window.RESIDENTS.filter((r) =>
  `${r.firstName} ${r.lastName}`.toLowerCase().includes((query || '').toLowerCase()));
  if (filter === 'watch') list = list.filter(isWatch);
  if (filter === 'incall') list = list.filter((r) => r.inCall);
  if (filter === 'new') list = list.filter((r) => r.calls.length === 0);

  const Card = (r) => {
    const lm = lastMoodOf(r);
    const lmObj = lm ? window.moodOf(lm) : null;
    return (
      <button key={r.id} className={`card res-card cardstyle-${cardStyle}`} onClick={() => openProfile(r)}>
        <div className="res-top">
          <Avatar first={r.firstName} last={r.lastName} mood={lm} size={48} className="res-avatar" />
          <div className="res-id">
            <div className="res-name">
              {r.firstName} {r.lastName}
              {r.inCall && <span className="in-call-pill"><span className="in-call-dot"></span>en appel</span>}
            </div>
            <div className="res-meta">{r.age != null && `${r.age} ans · `}Chambre {r.room}{r.since && r.since !== '—' && ` · depuis ${r.since}`}</div>
            <div className="res-cond">{r.condition}</div>
          </div>
        </div>
        <div className="res-foot">
          <div className="res-foot-left">
            {r.calls[0] ?
            <span className="res-last res-summary">{r.calls[0].summary}</span> :
            <span className="res-last">Aucun appel enregistré</span>}
          </div>
          <span className="res-open"><Icon name="chevron-right" size={16} /></span>
        </div>
      </button>);

  };

  return (
    <div className={`page fade-up layout-${layout}`}>
      <div className="res-toolbar">
        <div>
          <h2 className="res-toolbar-title">Résidents</h2>
          <p className="res-toolbar-sub">{window.RESIDENTS.length} résidents accompagnés par Livana</p>
        </div>
        <button className="btn btn-accent" onClick={() => setAddOpen(true)}>
          <Icon name="plus" size={16} /> Ajouter un résident
        </button>
      </div>
      {draft &&
      <button className="draft-banner" onClick={() => setAddOpen(true)}>
        <span className="draft-ic"><Icon name="edit" size={16} /></span>
        <span className="draft-tx">
          <span className="draft-title">Brouillon en cours{draft.g && (draft.g.firstName || draft.g.lastName) ? ` · ${draft.g.firstName} ${draft.g.lastName}` : ''}</span>
          <span className="draft-sub">Configuration non terminée — reprendre où vous en étiez</span>
        </span>
        <span className="draft-resume">Reprendre <Icon name="chevron-right" size={14} /></span>
        <span className="draft-del" onClick={(e) => {e.stopPropagation();window.RESIDENT_DRAFT = null;setDraft(null);}} title="Supprimer le brouillon"><Icon name="x" size={15} /></span>
      </button>
      }
      {list.length === 0 ?
      <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-3)' }}>Aucun résident ne correspond.</div> :

      <React.Fragment>
        {/* Liste mobile : mêmes données que le tableau mais empilées, pour
            tout voir sans faire défiler l'écran de gauche à droite.
            Le CSS bascule entre les deux à 720 px. */}
        <div className="card res-mlist">
          {list.map((r) => {
            const a = tauxApaisement(r);
            return (
              <button key={r.id} className="res-mrow" onClick={() => openProfile(r)}>
                <div className="res-mrow-head">
                  <Avatar first={r.firstName} last={r.lastName} mood={lastMoodOf(r)} size={38} />
                  <div className="res-mrow-id">
                    <div className="res-mrow-name">
                      {r.firstName} {r.lastName}
                      {r.inCall && <span className="in-call-pill"><span className="in-call-dot"></span>live</span>}
                    </div>
                    <div className="res-mrow-sub">Chambre {r.room}</div>
                  </div>
                  <Icon name="chevron-right" size={16} stroke="var(--text-3)" />
                </div>
                <div className="res-mrow-stats">
                  <div className="res-mstat">
                    <span className="res-mstat-lbl">Apaisement</span>
                    <span className="res-mstat-val">{a ? a.pourcent + ' %' : '—'}</span>
                  </div>
                  <div className="res-mstat">
                    <span className="res-mstat-lbl">Appels</span>
                    <span className="res-mstat-val">{r.kpi.calls}</span>
                  </div>
                  <div className="res-mstat">
                    <span className="res-mstat-lbl">Moy. / jour</span>
                    <span className="res-mstat-val">{r.kpi.callsPerDay != null ? r.kpi.callsPerDay : '—'}</span>
                  </div>
                </div>
              </button>);

          })}
        </div>

        <div className="card res-tablewrap" style={{ padding: '16px 8px', overflowX: 'auto' }}>
          <table className="res-table">
            <thead><tr><th>Résident</th><th>Chambre</th><th>TAUX D'APAISEMENT</th><th>Appels (total)</th><th>Moy. / jour</th><th></th></tr></thead>
            <tbody>
              {list.map((r) =>
            <tr key={r.id} onClick={() => openProfile(r)}>
                  <td className="td-name"><div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Avatar first={r.firstName} last={r.lastName} mood={lastMoodOf(r)} size={32} />{r.firstName} {r.lastName}{r.inCall && <span className="in-call-pill"><span className="in-call-dot"></span>live</span>}</div></td>
                  <td>{r.room}</td>
                  <td>{(() => { const a = tauxApaisement(r); return a ? a.pourcent + ' %' : '—'; })()} <TrendBadge trend={r.kpi.trend} /></td>
                  <td>{r.kpi.calls}</td>
                  <td>{r.kpi.callsPerDay != null ? r.kpi.callsPerDay + ' /jour' : r.kpi.calls > 0 ? (3 + r.kpi.calls % 20 / 10).toFixed(1).replace('.', ',') + ' /jour' : '—'}</td>
                  <td><Icon name="chevron-right" size={16} stroke="var(--text-3)" /></td>
                </tr>
            )}
            </tbody>
          </table>
        </div>
      </React.Fragment>
      }

      {addOpen && <AddResidentModal draft={draft} onClose={() => setAddOpen(false)} onSaveDraft={(d) => {window.RESIDENT_DRAFT = d;setDraft(d);setAddOpen(false);}} onCreated={() => {window.RESIDENT_DRAFT = null;setDraft(null);}} />}
    </div>);

}

window.Residents = Residents;