/* ============================================================
   app.jsx — shell: topbar + stage router
   ============================================================ */

function TopBar() {
  const { stage, setStage, doc, updateMeta, tweaks, reviewer, setReviewer, setCurrentDocId } = useApp();
  const { user } = (typeof useAuth === 'function') ? useAuth() : { user: null };
  const role = ROLES[tweaks.role] || ROLES.instromer;
  const displayName = reviewer ? reviewer.name : (user?.email ? user.email.split('@')[0] : role.name);
  const displayColor = reviewer ? reviewer.color : role.color;
  const displayLabel = reviewer ? (reviewer.org || 'Reviewer') : (user?.email ? 'ingelogd' : role.label);

  return (
    <header className="topbar" data-screen-label="TopBar">
      <div className="brand">
        {window.HAS_SUPABASE && !window.IS_REVIEWER_MODE && (
          <button className="brand-back" title="Terug naar documenten"
                  onClick={() => { if (setCurrentDocId) setCurrentDocId(null); }}>←</button>
        )}
        <div className="brand-mark">T</div>
        <div className="brand-name">Tender<em>Studio</em></div>
        {window.IS_REVIEWER_MODE && <span className="reviewer-mode-badge">Reviewlink</span>}
      </div>

      {!window.IS_REVIEWER_MODE && (
        <nav className="stages" aria-label="Stappen">
          {[
            { key: 'setup',  label: 'Setup',  n: 1 },
            { key: 'editor', label: 'Editor', n: 2 },
            { key: 'review', label: 'Review', n: 3 },
            { key: 'export', label: 'Export', n: 4 },
          ].map(s => (
            <button key={s.key}
                    className={'stage-pill' + (stage === s.key ? ' active':'')}
                    onClick={() => setStage(s.key)}>
              <span className="stage-n">{s.n}</span>
              <span>{s.label}</span>
            </button>
          ))}
        </nav>
      )}
      {window.IS_REVIEWER_MODE && <div className="reviewer-mode-title">{doc.meta.title}</div>}

      <div className="topbar-right">
        {!window.IS_REVIEWER_MODE && (
          <input className="doc-title"
                 value={doc.meta.title}
                 onChange={e => updateMeta({ title: e.target.value })}/>
        )}
        <div className="role-chip" title={displayName + (reviewer ? ' (reviewlink)' : (user ? ' · ' + user.email : ''))}>
          <span className="dot" style={{background: displayColor}}></span>
          <span className="role-chip-name">{displayName}</span>
          <span className="role-chip-label">&middot; {displayLabel}</span>
          {reviewer && (
            <button className="role-chip-logout"
                    title="Reviewer-identiteit wissen"
                    onClick={(e) => { e.stopPropagation(); setReviewer(null); }}>×</button>
          )}
          {user && !reviewer && (
            <button className="role-chip-logout"
                    title="Uitloggen"
                    onClick={(e) => { e.stopPropagation(); if (confirm('Uitloggen?')) authSignOut(); }}>×</button>
          )}
        </div>
        {!window.IS_REVIEWER_MODE && <HistoryPanel/>}
      </div>
    </header>
  );
}

function EditorStage() {
  return (
    <main className="editor-grid" data-screen-label="02 Editor">
      <Sidebar/>
      <Canvas/>
      <CommentsPanel/>
    </main>
  );
}

function StageRouter() {
  const { stage } = useApp();
  switch (stage) {
    case 'setup':  return <div data-screen-label="01 Setup" style={{overflow:'auto'}}><SetupScreen/></div>;
    case 'editor': return <EditorStage/>;
    case 'review': return <div data-screen-label="03 Review" style={{height:'100%'}}><ReviewScreen/></div>;
    case 'export': return <div data-screen-label="04 Export" style={{height:'100%'}}><ExportScreen/></div>;
    default: return <div>Onbekend scherm</div>;
  }
}

function App() {
  const { tweaks, currentDocId, docLoading } = useApp();

  // Reviewer-mode: locked to review stage, no docs list, no setup/editor
  if (window.IS_REVIEWER_MODE) {
    if (docLoading) {
      return <div className="app" data-theme={tweaks.theme}><div className="auth-wrap"><div className="auth-loading"><div className="auth-spinner"/><div>Reviewlink openen…</div></div></div></div>;
    }
    if (window.__TOKEN_INVALID) {
      return (
        <div className="app" data-theme={tweaks.theme}>
          <div className="auth-wrap">
            <div className="auth-card" style={{textAlign:'center'}}>
              <h1 style={{fontFamily:'var(--f-serif)', fontSize: 28, margin:'0 0 8px'}}>Link ongeldig of verlopen</h1>
              <p style={{color:'var(--ink-3)', fontSize: 14}}>
                Deze reviewlink werkt niet meer. Vraag de eigenaar om een nieuwe link.
              </p>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="app reviewer-mode" data-theme={tweaks.theme} data-density={tweaks.density}>
        <TopBar/>
        <StageRouter/>
        <ReviewerGate/>
      </div>
    );
  }

  // If no doc selected AND Supabase is on, show docs list (no topbar/tweaks yet)
  if (window.HAS_SUPABASE && !currentDocId) {
    return <div className="app" data-theme={tweaks.theme} data-density={tweaks.density}><DocsScreen/></div>;
  }
  if (docLoading) {
    return <div className="app" data-theme={tweaks.theme}><div className="auth-wrap"><div className="auth-loading"><div className="auth-spinner"/><div>Document laden…</div></div></div></div>;
  }
  return (
    <div className="app" data-theme={tweaks.theme} data-density={tweaks.density}>
      <TopBar/>
      <StageRouter/>
      <TweaksPanel/>
      <ReviewerGate/>
    </div>
  );
}

function Root() {
  return (
    <AuthGate>
      <AppProvider>
        <App/>
      </AppProvider>
    </AuthGate>
  );
}

function AuthGate({ children }) {
  const { session, loading } = useAuth();
  if (!HAS_SUPABASE) return children;
  if (window.IS_REVIEWER_MODE) return children; // skip auth for reviewlinks
  if (loading) return <div className="auth-wrap"><div className="auth-loading"><div className="auth-spinner"/><div>Bezig met laden…</div></div></div>;
  if (!session) return <AuthScreen/>;
  return children;
}

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