// ── Theme ────────────────────────────────────────────────────────────────

function useTheme() {
  const [theme, setThemeState] = useState(() => localStorage.getItem('vibey_theme') || 'dark');

  const setTheme = useCallback((t) => {
    setThemeState(t);
    document.documentElement.dataset.theme = t;
    localStorage.setItem('vibey_theme', t);
  }, []);

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
  }, []);

  const toggle = useCallback(() => setTheme(theme === 'dark' ? 'light' : 'dark'), [theme, setTheme]);

  return { theme, toggle };
}

// ── App Shell ────────────────────────────────────────────────────────────

const DASH_PAGES = new Set([
  'services', 'webhooks', 'static', 'shortener', 'workers', 'render',
  'profile', 'users', 'tunnel-mgmt', 'mail-admin', 'workers-admin', 'health',
]);

function Dashboard({ user: initialUser, onLogout }) {
  const [page, setPage] = useState(() => {
    const h = (typeof window !== 'undefined' && window.location.hash)
      ? window.location.hash.slice(1).split('?')[0]
      : '';
    if (!DASH_PAGES.has(h)) return 'services';
    if (h === 'render') {
      const ok = initialUser.role === 'admin' || (initialUser.enabledServices || []).includes('render');
      if (!ok) return 'services';
    }
    return h;
  });
  const [user, setUser] = useState(initialUser);
  const { theme, toggle: toggleTheme } = useTheme();

  const isAdmin = user.role === 'admin';
  const hasService = (key) => isAdmin || (user.enabledServices || []).includes(key);
  const initial = (user.name || user.username || '?')[0].toUpperCase();

  const goPage = useCallback((p) => {
    setPage(p);
    if (typeof window !== 'undefined' && window.history && window.history.replaceState) {
      window.history.replaceState(null, '', '#' + p);
    }
  }, []);

  useEffect(() => {
    const canRender = user.role === 'admin' || (user.enabledServices || []).includes('render');
    if (page === 'render' && !canRender) goPage('services');
    if (page === 'health' && user.role !== 'admin') goPage('services');
  }, [page, user.enabledServices, user.role, goPage]);

  useEffect(() => {
    const canRender = user.role === 'admin' || (user.enabledServices || []).includes('render');
    const onHash = () => {
      const h = (window.location.hash || '#services').slice(1).split('?')[0];
      if (!DASH_PAGES.has(h)) return;
      if ((h === 'render' && !canRender) || (h === 'health' && user.role !== 'admin')) {
        goPage('services');
        return;
      }
      setPage(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, [user.enabledServices, user.role, goPage]);

  return (
    <div className="dash">
      <aside className="sidebar">
        <div className="logo">vibey<span>.</span></div>
        <nav>
          <a href="#services" className={page === 'services' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('services'); }}>
            ◆ Services
          </a>
          {hasService('webhooks') && (
            <a href="#webhooks" className={page === 'webhooks' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('webhooks'); }}>
              ◈ Webhooks
            </a>
          )}
          {hasService('static') && (
            <a href="#static" className={page === 'static' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('static'); }}>
              ◧ Static Sites
            </a>
          )}
          {hasService('render') && (
            <a href="#render" className={page === 'render' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('render'); }}>
              ▣ Render
            </a>
          )}
          {hasService('l') && (
            <a href="#shortener" className={page === 'shortener' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('shortener'); }}>
              ◈ URL Shortener
            </a>
          )}
          {hasService('workers') && (
            <a href="#workers" className={page === 'workers' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('workers'); }}>
              ⬢ Workers
            </a>
          )}
          <a href="#profile" className={page === 'profile' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('profile'); }}>
            ◇ Profile
          </a>
          {isAdmin && (
            <>
              <div className="nav-section">Admin</div>
              <a href="#health" className={page === 'health' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('health'); }}>
                ♥ Health
              </a>
              <a href="#users" className={page === 'users' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('users'); }}>
                ◉ Users
              </a>
              <a href="#tunnel-mgmt" className={page === 'tunnel-mgmt' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('tunnel-mgmt'); }}>
                ⬡ Tunnel Management
              </a>
              <a href="#mail-admin" className={page === 'mail-admin' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('mail-admin'); }}>
                ✉ Disposable Mail
              </a>
              <a href="#workers-admin" className={page === 'workers-admin' ? 'active' : ''} onClick={e => { e.preventDefault(); goPage('workers-admin'); }}>
                ⬢ Workers Admin
              </a>
            </>
          )}
        </nav>
        <div className="spacer" />
        <div className="user-pill">
          <div className="avatar">{initial}</div>
          <div>
            <div style={{fontWeight:600}}>{user.name || user.username}</div>
            <div style={{fontSize:'11px',color:'var(--text-dim)'}}>
              {user.email || user.username}
              {isAdmin && <span style={{marginLeft:6,color:'var(--accent)',fontWeight:600}}>admin</span>}
            </div>
          </div>
        </div>
        <button className="theme-toggle" onClick={toggleTheme}>
          <span className="theme-icon">{theme === 'dark' ? '☀' : '☾'}</span>
          {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
        </button>
        <button className="btn-ghost" style={{marginTop:'8px',width:'100%'}} onClick={onLogout}>
          Sign Out
        </button>
      </aside>
      <main className="main">
        {page === 'services' && <ServicesPage />}
        {page === 'webhooks' && hasService('webhooks') && <WebhooksPage />}
        {page === 'static'   && hasService('static') && <StaticPage user={user} setUser={setUser} />}
        {page === 'render' && hasService('render') && <RenderPage user={user} />}
        {page === 'shortener' && hasService('l') && <ShortenerPage user={user} />}
        {page === 'profile'  && <ProfilePage user={user} setUser={setUser} />}
        {page === 'health' && isAdmin && <HostHealthPage />}
        {page === 'users'    && isAdmin && <UsersPage />}
        {page === 'tunnel-mgmt' && isAdmin && <TunnelManagementPage />}
        {page === 'workers' && hasService('workers') && <WorkersPage user={user} />}
        {page === 'mail-admin' && isAdmin && <MailAdminPage />}
        {page === 'workers-admin' && isAdmin && <WorkersAdminPage />}
      </main>
    </div>
  );
}

function App() {
  const [user, setUser] = useState(null);
  const [checking, setChecking] = useState(true);

  useEffect(() => {
    const token = localStorage.getItem('vibey_token');
    if (!token) { setChecking(false); return; }
    api('/api/me')
      .then(u => setUser(u))
      .catch(() => localStorage.removeItem('vibey_token'))
      .finally(() => setChecking(false));
  }, []);

  const logout = () => { localStorage.removeItem('vibey_token'); setUser(null); };

  if (checking) return null;
  if (!user) return <LoginPage onLogin={setUser} />;
  return <Dashboard user={user} onLogout={logout} />;
}

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