// Coquille de navigation + panneau d'appel — Dashboard Livana

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function Sidebar({ page, go, inCallCount, onLogout, onSettings, onRetention }) {
  const item = (id, icon, label, badge) => (
    <button className={`sb-item ${page === id ? 'active' : ''}`} onClick={() => go(id)} data-tip={label}>
      <span className="sb-ic">{icon === 'orb' ? <span className="sb-orb"></span> : icon === 'sparkles' ? <span style={{ color: 'var(--accent)', display: 'inline-flex' }}><Icon name="sparkles" size={22} /></span> : <Icon name={icon} size={20} />}</span>
      {badge ? <span className="sb-item-badge">{badge}</span> : null}
    </button>
  );
  return (
    <nav className="sidebar sidebar-rail">
      <div className="sb-brand">
        <span className="sb-logo sb-logo-img"><img src="assets/livana-phone.png" alt="Livana" /></span>
      </div>

      <div className="sb-nav">
        {item('home', 'home', "Vue d'ensemble")}
        {item('residents', 'user', 'Résidents', window.RESIDENTS.length)}
        {item('recent', 'history', 'Appels récents')}
        {item('assistant', 'message', 'Livana Copilot')}
      </div>

      <div className="sb-spacer"></div>

      <button className="sb-rail-icon" data-tip="Hébergement HDS · conservation des données" onClick={onRetention}><Icon name="server" size={19} /></button>
      <button className="sb-rail-icon" data-tip="Paramètres du compte" onClick={onSettings}><Icon name="settings" size={19} /></button>
      <button className="sb-rail-icon" data-tip="Se déconnecter" onClick={onLogout}><Icon name="logout" size={19} /></button>
      <button className="sb-avatar sb-rail-avatar" data-tip={`${window.PSY.firstName} ${window.PSY.lastName} · Paramètres`} onClick={onSettings}>{window.PSY.initials}</button>
    </nav>
  );
}

// Navigation mobile : barre fixée en bas d'écran, affichée par le CSS
// uniquement sous 720 px (là où la sidebar est masquée).
function MobileNav({ page, go, onSettings, onLogout }) {
  const item = (id, icon, label) => (
    <button className={`mnav-item ${page === id ? 'active' : ''}`} onClick={() => go(id)} aria-label={label}>
      <Icon name={icon} size={21} />
      <span className="mnav-lbl">{label}</span>
    </button>
  );
  return (
    <nav className="mobile-nav">
      {item('home', 'home', 'Accueil')}
      {item('residents', 'user', 'Résidents')}
      {item('recent', 'history', 'Appels')}
      {item('assistant', 'message', 'Copilot')}
      <button className="mnav-item" onClick={onSettings} aria-label="Paramètres">
        <Icon name="settings" size={21} />
        <span className="mnav-lbl">Réglages</span>
      </button>
      <button className="mnav-item" onClick={onLogout} aria-label="Se déconnecter">
        <Icon name="logout" size={21} />
        <span className="mnav-lbl">Quitter</span>
      </button>
    </nav>
  );
}

function Topbar({ title, sub, query, setQuery, onLogout }) {
  return (
    <header className="topbar">
      <div>
        <div className="topbar-title">{title}</div>
        {sub && <div className="topbar-sub">{sub}</div>}
      </div>
      <button className="topbar-icon-btn" title="Se déconnecter" onClick={onLogout} style={{ marginLeft: 'auto' }}>
        <Icon name="logout" size={18} />
      </button>
    </header>
  );
}

// ── Call detail drawer with confidentiality lock ──
function CallDrawer({ call, resident, unlocked, onUnlockRequest, onClose, onDelete }) {
  const [confirmer, setConfirmer] = useStateS(false);
  const [suppression, setSuppression] = useStateS(false);
  useEffectS(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  if (!call) return null;
  const locked = !unlocked;

  // Suppression réservée au contenu déverrouillé (le PIN vaut preuve d'identité)
  const supprimer = async () => {
    setSuppression(true);
    try { await onDelete(call); }
    catch (e) { setSuppression(false); setConfirmer(false); }
  };

  return (
    <React.Fragment>
      <div className="drawer-backdrop" onClick={onClose}></div>
      <div className="drawer" role="dialog" aria-label="Détail de l'appel">
        <div className="drawer-head">
          <div className="drawer-top">
            <div>
              <div className="drawer-name">{resident.firstName} {resident.lastName}</div>
              <div className="drawer-when">{call.when} · {call.duration} · ch. {resident.room}</div>
            </div>
            <div className="drawer-top-actions">
              {!locked && onDelete && (
                <button className="drawer-del" onClick={() => setConfirmer(true)} title="Supprimer cet appel">
                  <Icon name="trash" size={17} />
                </button>
              )}
              <button className="drawer-close" onClick={onClose}><Icon name="chevron-right" size={18} /></button>
            </div>
          </div>
          <div className="drawer-flow">
            {window.MoodFlow ? <window.MoodFlow call={call} /> : <React.Fragment>
              <MoodPill mood={call.moodStart} />
              <span className="call-arrow"><Icon name="arrow-right" size={16} /></span>
              <MoodPill mood={call.moodEnd} />
            </React.Fragment>}
            <span className="sensitive-ribbon" style={{ marginLeft: 'auto' }}>
              <Icon name="lock" size={12} /> Donnée sensible
            </span>
          </div>
        </div>

        <div className="drawer-body">
          <div className={`locked-zone ${locked ? 'is-locked' : ''}`}>
            {locked && (
              <div className="lz-gate">
                <div className="lz-lockic"><Icon name="lock" size={22} /></div>
                <div className="lz-title">Résumé &amp; transcription protégés</div>
                <div className="lz-sub">Ces contenus relèvent du secret médical. Déverrouillez-les avec votre code à 4&nbsp;chiffres.</div>
                <button className="btn btn-accent" onClick={onUnlockRequest}>
                  <Icon name="lock" size={15} /> Déverrouiller
                </button>
              </div>
            )}
            <div className="lz-content">
              <div className="drawer-block">
                <div className="drawer-block-h">
                  <span className="eyebrow">Résumé de l'appel</span>
                </div>
                <p className="drawer-summary">{call.summary}</p>
              </div>

              <div className="drawer-block">
                <div className="drawer-block-h">
                  <span className="eyebrow">Transcription complète</span>
                  <span className="lock-badge"><Icon name="message" size={13} /> {call.transcript.length} échanges</span>
                </div>
                <div className="transcript">
                  {call.transcript.map((b, i) => (
                    <div key={i} className={`bubble ${b.speaker}`}>
                      <div className="who">{b.speaker === 'livana' ? 'Livana' : resident.lastName}</div>
                      {b.text}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {confirmer && (
          <div className="drawer-confirm">
            <div className="drawer-confirm-txt">
              Supprimer définitivement cet appel ? Le résumé et la transcription seront perdus, sans retour possible.
            </div>
            <div className="drawer-confirm-actions">
              <button className="btn btn-ghost btn-sm" onClick={() => setConfirmer(false)} disabled={suppression}>Annuler</button>
              <button className="btn btn-danger btn-sm" onClick={supprimer} disabled={suppression}>
                <Icon name="trash" size={14} /> {suppression ? 'Suppression…' : 'Supprimer'}
              </button>
            </div>
          </div>
        )}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Sidebar, MobileNav, Topbar, CallDrawer });