// Examine — Tweaks panel + main app shell (per-user)
function Tweaks({ state, setState, user, onLogout, visible, onClose, onSwitch }) {
  if (!visible) return null;
  return (
    <div className="tweaks">
      <h4>Tweaks <button className="icon-btn" style={{width:24, height:24, border:0}} onClick={onClose}><Icon name="x" size={14}/></button></h4>
      <div className="tweak-row">
        <label>Theme</label>
        <div className="theme-pick">
          <button className={state.theme==='light'?'on':''} onClick={() => setState(s => ({...s, theme:'light'}))}>Light</button>
          <button className={state.theme==='dark'?'on':''} onClick={() => setState(s => ({...s, theme:'dark'}))}>Dark</button>
        </div>
      </div>
      <div className="tweak-row">
        <label>Font scale</label>
        <input type="range" min="0.9" max="1.15" step="0.05" value={state.fontScale}
          onChange={e => setState(s => ({...s, fontScale: +e.target.value}))} />
      </div>
      <div className="tweak-row">
        <label>Exam timer</label>
        <button className={`toggle ${state.timerEnabled?'on':''}`} onClick={() => setState(s => ({...s, timerEnabled: !s.timerEnabled}))}></button>
      </div>
      {state.timerEnabled && (
        <div className="tweak-row">
          <label>Minutes</label>
          <input type="number" min="10" max="180" value={state.timerMinutes}
            onChange={e => setState(s => ({...s, timerMinutes: +e.target.value || 60}))}
            style={{width:'70px', padding:'0.3rem 0.5rem', border:'1px solid var(--rule)', borderRadius:'6px', background:'var(--paper-2)', color:'var(--ink)', fontFamily:'var(--mono)'}} />
        </div>
      )}
      <div className="tweak-row">
        <label>Instant feedback</label>
        <button className={`toggle ${state.instantFeedback?'on':''}`} onClick={() => setState(s => ({...s, instantFeedback: !s.instantFeedback}))}></button>
      </div>
      <div style={{marginTop:'0.8rem', paddingTop:'0.8rem', borderTop:'1px solid var(--rule)'}}>
        <div style={{fontSize:'0.74rem', textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom:'0.5rem', fontWeight:600}}>
          Signed in as
        </div>
        <div style={{display:'flex', alignItems:'center', gap:'0.55rem', marginBottom:'0.7rem'}}>
          <span className="user-ini">{user?.name?.charAt(0).toUpperCase()}</span>
          <span style={{fontFamily:'var(--serif)', fontSize:'0.95rem'}}>{user?.name}</span>
        </div>
        <button className="btn btn-ghost" style={{width:'100%', justifyContent:'center', fontSize:'0.82rem', padding:'0.5rem', marginBottom:'0.4rem'}}
          onClick={onSwitch}>
          Switch profile
        </button>
        <button className="btn btn-ghost" style={{width:'100%', justifyContent:'center', fontSize:'0.82rem', padding:'0.5rem', marginBottom:'0.4rem'}}
          onClick={onLogout}>
          Sign out
        </button>
        <button className="btn btn-ghost" style={{width:'100%', justifyContent:'center', fontSize:'0.82rem', padding:'0.5rem'}}
          onClick={() => { if (confirm('Reset this profile’s progress?')) { window.Storage.reset(user.id); location.reload(); } }}>
          <Icon name="refresh" size={14}/> Reset progress
        </button>
      </div>
    </div>
  );
}

function ExamApp({ user, onSwitch }) {
  const [state, setStateRaw] = useState(() => window.Storage.load(user.id));
  const [page, setPage] = useState('home');
  const [showTweaks, setShowTweaks] = useState(false);

  const setState = useCallback((updater) => {
    setStateRaw(prev => {
      const next = typeof updater === 'function' ? updater(prev) : updater;
      window.Storage.save(user.id, next);
      return next;
    });
  }, [user.id]);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', state.theme);
    document.documentElement.style.setProperty('font-size', `${state.fontScale * 16}px`);
  }, [state.theme, state.fontScale]);

  useEffect(() => {
    if (state.activeSession && state.sessions[state.activeSession] && !state.sessions[state.activeSession].finishedAt) {
      setPage('runner');
    }
  }, []);

  const startSet = (setId, mode) => {
    const id = 'sess_' + Date.now();
    setState(s => ({
      ...s,
      sessions: { ...s.sessions, [id]: { setId, mode, answers: {}, startedAt: Date.now(), currentIdx: 0 } },
      activeSession: id
    }));
    setPage('runner');
  };

  const exitRunner = () => {
    setState(s => ({ ...s, activeSession: null }));
    setPage('home');
  };

  const logout = () => {
    window.Storage.setActiveUserId(null);
    location.reload();
  };

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand">
          <div className="brand-mark">E</div>
          <span className="brand-name">Examine</span>
          <span className="brand-sub">Financial Mgmt MBA</span>
          <span className="beta-pill">BETA</span>
        </div>
        <nav className="nav">
          <button className={`nav-btn ${page==='home'?'active':''}`} onClick={() => setPage('home')}>Home</button>
          <button className={`nav-btn ${page==='browse'?'active':''}`} onClick={() => setPage('browse')}>Browse</button>
          <button className={`nav-btn ${page==='analytics'?'active':''}`} onClick={() => setPage('analytics')}>Analytics</button>
          <button className={`nav-btn ${page==='cases'?'active':''}`} onClick={() => setPage('cases')}>Part 2 Cases</button>
        </nav>
        <div className="role-toggle">
          <button className={state.role==='student'?'on':''} onClick={() => setState(s => ({...s, role:'student'}))}>Student</button>
          <button className={state.role==='instructor'?'on':''} onClick={() => setState(s => ({...s, role:'instructor'}))}>Instructor</button>
        </div>
        <button className="user-pill" onClick={() => setShowTweaks(v => !v)} title={`Signed in as ${user.name}`}>
          <span className="user-ini">{user.name.charAt(0).toUpperCase()}</span>
          <span className="user-nm">{user.name}</span>
        </button>
        <button className="icon-btn" onClick={() => setShowTweaks(!showTweaks)} title="Tweaks">
          <Icon name="settings" size={18} />
        </button>
      </header>

      <main className="main">
        {page === 'home' && <Home state={state} setState={setState} onPickSet={startSet} onNav={setPage} user={user} />}
        {page === 'browse' && <Browse state={state} setState={setState} />}
        {page === 'analytics' && <Analytics state={state} />}
        {page === 'cases' && <CaseViewer state={state} setState={setState} />}
        {page === 'runner' && state.activeSession && (
          <Runner state={state} setState={setState} sessionId={state.activeSession} onExit={exitRunner} />
        )}
      </main>

      <Tweaks
        state={state} setState={setState}
        user={user}
        visible={showTweaks}
        onClose={() => setShowTweaks(false)}
        onSwitch={onSwitch}
        onLogout={logout}
      />
    </div>
  );
}

function App() {
  const [user, setUser] = useState(() => {
    const id = window.Storage.getActiveUserId();
    if (!id) return null;
    return window.Storage.listUsers().find(u => u.id === id) || null;
  });

  useEffect(() => {
    if (!user) {
      document.documentElement.setAttribute('data-theme', 'light');
      document.documentElement.style.setProperty('font-size', '16px');
    }
  }, [user]);

  if (!user) {
    return <LoginGate onAuth={(u) => setUser(u)} />;
  }

  return <ExamApp user={user} onSwitch={() => { window.Storage.setActiveUserId(null); setUser(null); }} />;
}

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