// App — orchestration, navigation, tweaks

const { useState: useStateApp, useEffect: useEffectApp } = React;

// Apparence et dispositions retenues pour le dashboard (anciennes variantes
// du panneau de tweaks de la phase design, figées ici).
const UI = {
  theme: 'sage',
  density: 'comfortable',
  homeLayout: 'fullchat',
  vigChart: 'off',
  residentLayout: 'grid',
  cardStyle: 'standard',
  asstStyle: 'card',
  profileLayout: 'tabs2',
  dossierLayout: 'simple',
};

const PAGE_META = {
  home:      { title: "Vue d'ensemble", sub: () => `Bonjour ${window.PSY.firstName} — voici l'état émotionnel de vos résidents aujourd'hui.` },
  residents: { title: 'Résidents', sub: () => `${window.RESIDENTS.length} résidents accompagnés par Livana` },
  responses: { title: 'Réponses ciblées', sub: () => "Ce que Livana a appris lors des appels" },
  assistant: { title: 'Assistant IA clinique', sub: () => "Analysez les transcriptions pour affiner le suivi" },
  calls:     { title: 'Appels en direct', sub: () => 'Suivi des conversations en cours' },
};

// ── Live calls page ──
function LiveCalls({ openProfile }) {
  const live = window.RESIDENTS.filter((r) => r.inCall);
  if (live.length === 0) {
    return (
      <div className="page fade-up">
        <div className="card" style={{ padding: 60, textAlign: 'center', color: 'var(--text-3)' }}>
          <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text)' }}>Aucun appel en cours</div>
          <div style={{ marginTop: 6, fontSize: 13 }}>Les appels en direct s'afficheront ici.</div>
        </div>
      </div>
    );
  }
  return (
    <div className="page fade-up">
      <div className="res-grid">
        {live.map((r) => (
          <button key={r.id} className="card res-card" onClick={() => openProfile(r)}>
            <div className="res-top">
              <div style={{ position: 'relative' }}>
                <Avatar first={r.firstName} last={r.lastName} mood="calm" size={48} className="res-avatar" />
              </div>
              <div className="res-id">
                <div className="res-name">{r.firstName} {r.lastName} <span className="in-call-pill"><span className="in-call-dot"></span>en appel</span></div>
                <div className="res-meta">Chambre {r.room} · débuté à {r.callStartedAt}</div>
                <div className="res-cond">{r.condition}</div>
              </div>
            </div>
            <div className="res-foot">
              <span className="res-last" style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                <span className="chat-orb pulsing" style={{ width: 22, height: 22 }}></span>
                Conversation en cours avec Livana
              </span>
              <span className="res-open"><Icon name="chevron-right" size={16} /></span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function App() {
  const t = UI;
  const [logged, setLogged] = useStateApp(false);
  const [page, setPage] = useStateApp('home');
  const [resident, setResident] = useStateApp(null);
  const [openCallObj, setOpenCallObj] = useStateApp(null);
  const [unlocked, setUnlocked] = useStateApp(false);
  const [pinOpen, setPinOpen] = useStateApp(false);
  const [settingsOpen, setSettingsOpen] = useStateApp(false);
  const [retentionOpen, setRetentionOpen] = useStateApp(false);
  const [logoutOpen, setLogoutOpen] = useStateApp(false);
  const [query, setQuery] = useStateApp('');

  // Déconnexion : demandée depuis la sidebar et la barre mobile. La
  // confirmation évite de perdre par erreur la session et les conversations
  // en cours (signOut purge tout l'état sensible).
  const deconnecter = () => {
    setLogoutOpen(false);
    if (window.LivanaAPI) window.LivanaAPI.signOut();
    setLogged(false);
    setUnlocked(false);
    setPage('home');
  };

  // Reprise de session : si « Rester connectée » était cochée, Firebase a
  // conservé le jeton — on recharge les données sans redemander le mot de passe.
  const [restauration, setRestauration] = useStateApp(true);
  useEffectApp(() => {
    let vivant = true;
    (async () => {
      const api = window.LivanaAPI;
      try {
        const user = api && api.sessionExistante ? await api.sessionExistante() : null;
        if (user && user.email) {
          await api.loadAndApply(user.email);
          if (vivant) setLogged(true);
        }
      } catch (e) {
        console.warn('Session non restaurée :', e && (e.code || e.message));
      } finally {
        if (vivant) setRestauration(false);
      }
    })();
    return () => { vivant = false; };
  }, []);

  // Rafraîchissement automatique : la couche d'accès prévient l'écran dès qu'un
  // nouvel appel arrive dans Firebase (compteurs, listes et graphiques suivent).
  const [, setDataVersion] = useStateApp(0);
  useEffectApp(() => {
    if (!window.LivanaAPI || !window.LivanaAPI.onDataChange) return;
    return window.LivanaAPI.onDataChange(() => setDataVersion((v) => v + 1));
  }, []);

  const inCallCount = window.RESIDENTS.filter((r) => r.inCall).length;

  const [pendingPrompt, setPendingPrompt] = useStateApp(null);
  const [pendingTab, setPendingTab] = useStateApp(null);
  const openProfile = (r, prompt, tab) => { setResident(r); setPendingPrompt(prompt || null); setPendingTab(tab || null); setPage('profile'); setQuery(''); window.scrollToTop && window.scrollToTop(); };
  // Après un rafraîchissement temps réel, les objets résidents sont reconstruits :
  // on retrouve le résident affiché par son id pour ne pas montrer de données périmées.
  const residentFrais = resident ? (window.RESIDENTS.find((x) => x.id === resident.id) || resident) : null;
  const go = (p) => { setPage(p); if (p !== 'profile') setResident(null); };

  const requestUnlock = () => setPinOpen(true);
  const onPinSuccess = () => { setUnlocked(true); setPinOpen(false); };

  // Re-verrouillage automatique après 5 minutes sans activité : sur un poste
  // partagé, l'écran ne doit pas rester ouvert sur des transcriptions médicales.
  // Le délai repart à chaque action (clic, frappe, défilement) pour ne jamais
  // verrouiller quelqu'un en pleine lecture.
  const INACTIVITE_MAX = 5 * 60 * 1000;
  useEffectApp(() => {
    if (!unlocked) return;
    let minuterie = null;
    const reprogrammer = () => {
      clearTimeout(minuterie);
      minuterie = setTimeout(() => setUnlocked(false), INACTIVITE_MAX);
    };
    const evenements = ['mousedown', 'keydown', 'wheel', 'touchstart', 'scroll'];
    evenements.forEach((e) => window.addEventListener(e, reprogrammer, { passive: true, capture: true }));
    reprogrammer();
    return () => {
      clearTimeout(minuterie);
      evenements.forEach((e) => window.removeEventListener(e, reprogrammer, { capture: true }));
    };
  }, [unlocked]);

  // Vérification de la session en cours : évite d'afficher l'écran de
  // connexion une fraction de seconde avant de reprendre la session.
  if (restauration) {
    return (
      <div className="session-restore">
        <img className="session-restore-logo" src="assets/livana-logo.png" alt="Livana" />
        <div className="session-restore-tx">Ouverture de votre espace…</div>
      </div>);
  }

  if (!logged) return <Login onLogin={() => setLogged(true)} />;

  const meta = PAGE_META[page === 'profile' ? 'residents' : page] || PAGE_META.home;
  const title = page === 'profile' && residentFrais ? `${residentFrais.firstName} ${residentFrais.lastName}` : meta.title;
  const sub = page === 'profile' && residentFrais ? `Fiche de suivi · chambre ${residentFrais.room}` : meta.sub();

  return (
    <div className={`app-shell theme-${t.theme} density-${t.density} ${unlocked ? 'is-unlocked' : ''}`}>
      <Sidebar page={page === 'profile' ? 'residents' : page} go={go} inCallCount={inCallCount} onLogout={() => setLogoutOpen(true)} onSettings={() => setSettingsOpen(true)} onRetention={() => setRetentionOpen(true)} />
      <MobileNav page={page === 'profile' ? 'residents' : page} go={go} onSettings={() => setSettingsOpen(true)} onLogout={() => setLogoutOpen(true)} />

      <div className="main">
        <div className="scroll-area" id="scrollArea">
          {page === 'home' && <Home go={go} openProfile={openProfile} asstStyle={t.asstStyle} chatLocked={!unlocked} onUnlockRequest={requestUnlock} homeLayout={t.homeLayout} vigChart={t.vigChart === 'on'} />}
          {page === 'residents' && <Residents openProfile={openProfile} query={query} layout={t.residentLayout} cardStyle={t.cardStyle} />}
          {page === 'recent' && <RecentCalls openProfile={openProfile} openCall={(res, call) => { setResident(res); setOpenCallObj(call); }} />}
          {page === 'responses' && <Responses openProfile={openProfile} locked={!unlocked} onUnlockRequest={requestUnlock} />}
          {page === 'profile' && residentFrais && <Profile resident={residentFrais} back={() => go('residents')} openCall={setOpenCallObj} asstStyle={t.asstStyle} chatLocked={!unlocked} onUnlockRequest={requestUnlock} profileLayout={t.profileLayout} dossierLayout={t.dossierLayout} initialPrompt={pendingPrompt} onPromptConsumed={() => setPendingPrompt(null)} initialTab={pendingTab} />}
          {page === 'assistant' && (
            <div className="assistant-fullpage assistant-notop fade-up"><Assistant mode="page" pageStyle="chatgpt" asstStyle={t.asstStyle} onOpenProfile={openProfile} locked={!unlocked} onUnlockRequest={requestUnlock} suggestions={[
              "📋 Fais-moi une synthèse du dossier de [RÉSIDENT] sur les 7 derniers jours",
              "📈 Comment évolue l'humeur de [RÉSIDENT] ces dernières semaines ?",
              "🌿 Quels sujets semblent apaiser [RÉSIDENT] ?",
              "⚖️ Compare l'évolution de [RÉSIDENT] et [RÉSIDENT]",
              "⚠️ Quels résidents montrent des signes d'anxiété récurrents ?",
              "💬 Qu'est-ce qui ressort des derniers appels de [RÉSIDENT] ?",
            ]} /></div>
          )}
          {page === 'calls' && <LiveCalls openProfile={openProfile} />}
        </div>
      </div>

      {openCallObj && residentFrais && (
        <CallDrawer
          call={openCallObj}
          resident={residentFrais}
          unlocked={unlocked}
          onUnlockRequest={requestUnlock}
          onClose={() => setOpenCallObj(null)}
          onDelete={async (c) => {
            // Suppression Firebase ; le temps réel retire l'appel de l'affichage
            await window.LivanaAPI.supprimerNotification(c.id);
            setOpenCallObj(null);
          }}
        />
      )}

      {pinOpen && <PinModal expected={window.SOIGNANT_PIN || '1234'} onClose={() => setPinOpen(false)} onSuccess={onPinSuccess} />}

      {settingsOpen && <SettingsModal onClose={() => setSettingsOpen(false)} />}

      {retentionOpen && <RetentionModal onClose={() => setRetentionOpen(false)} />}

      {logoutOpen && (
        <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) setLogoutOpen(false); }}>
          <div className="cfg-modal cfg-modal-sm" role="dialog" aria-label="Confirmer la déconnexion">
            <div className="cfg-modal-head">
              <div>
                <div className="cfg-step">{window.PSY.firstName} {window.PSY.lastName}</div>
                <div className="cfg-modal-title">Se déconnecter ?</div>
              </div>
              <button className="drawer-close" onClick={() => setLogoutOpen(false)}><Icon name="x" size={18} /></button>
            </div>
            <div className="cfg-modal-body">
              <p className="cfg-intro">
                Vos conversations avec l'assistant et le déverrouillage du code seront effacés.
                Il faudra vous reconnecter pour retrouver le suivi des résidents.
              </p>
            </div>
            <div className="cfg-modal-actions">
              <button className="btn btn-ghost" onClick={() => setLogoutOpen(false)}>Annuler</button>
              <button className="btn btn-accent" onClick={deconnecter}>
                <Icon name="logout" size={14} /> Se déconnecter
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);