MediaCrawler/webui/src/App.tsx

import { useEffect, useState } from 'react'
import { Toaster } from 'sonner'
import { Loader2 } from 'lucide-react'
import { Sidebar } from '@/components/layout/Sidebar'
import { MainContent } from '@/components/layout/MainContent'
import { CrawlerConfigPanel } from '@/components/config/CrawlerConfigPanel'
import { MonitorDashboard } from '@/components/monitor/MonitorDashboard'
import { ReportView } from '@/components/monitor/ReportView'
import { SettingsView } from '@/components/settings/SettingsView'
import { Login } from '@/components/auth/Login'
import { EnvironmentCheck, isEnvChecked } from '@/components/env/EnvironmentCheck'
import { authApi, setUnauthorizedHandler } from '@/lib/api'

export type AppView = 'crawler' | 'monitor' | 'report' | 'settings'

function App() {
  // null = still probing. Rendering the app while unknown would briefly mount
  // the log WebSocket before we know whether the user is authenticated.
  const [authed, setAuthed] = useState<boolean | null>(null)
  // Initialize by checking localStorage if env check has passed
  const [envChecked, setEnvChecked] = useState(() => isEnvChecked())
  // Which top-level workspace is visible. Only one is mounted at a time: the
  // crawler view owns a live log WebSocket and a 2s status poll, which should
  // not keep running while the user is looking at the monitor dashboard.
  const [view, setView] = useState<AppView>('crawler')

  useEffect(() => {
    let cancelled = false
    authApi
      .me()
      .then(() => !cancelled && setAuthed(true))
      .catch(() => !cancelled && setAuthed(false))
    return () => {
      cancelled = true
    }
  }, [])

  // A 401 from any request means the session expired or was revoked elsewhere
  // (e.g. the password was changed on another device), so drop back to login.
  useEffect(() => {
    setUnauthorizedHandler(() => setAuthed(false))
    return () => setUnauthorizedHandler(null)
  }, [])

  const handleEnvCheckComplete = () => {
    setEnvChecked(true)
  }

  const handleLogout = async () => {
    try {
      await authApi.logout()
    } finally {
      // Even if the call fails, the local session is over; unmounting the tree
      // closes the log WebSocket via the existing connection-count cleanup.
      setAuthed(false)
    }
  }

  if (authed === null) {
    return (
      <div className="flex h-screen cyber-grid items-center justify-center">
        <Loader2 className="w-5 h-5 animate-spin text-cyber-neon-cyan" />
      </div>
    )
  }

  if (!authed) {
    return <Login onSuccess={() => setAuthed(true)} />
  }

  return (
    <div className="flex flex-col h-screen cyber-grid overflow-hidden relative">
      {/* Environment Check Modal - shown until the check passes or is skipped.
          A configuration concern, so it lives inside the authenticated tree. */}
      {!envChecked && <EnvironmentCheck onCheckComplete={handleEnvCheckComplete} />}

      {/* Header Bar */}
      <Sidebar currentView={view} onViewChange={setView} onLogout={handleLogout} />

      {/* Main Area */}
      <div className="flex-1 flex flex-col gap-4 p-4 overflow-hidden min-h-0">
        {view === 'crawler' && (
          <>
            {/* Config Panel - Primary Action Area (Always Expanded) */}
            <div className="flex-shrink-0">
              <CrawlerConfigPanel />
            </div>

            {/* Console - Collapsible Terminal */}
            <MainContent />
          </>
        )}
        {view === 'monitor' && <MonitorDashboard />}
        {view === 'report' && <ReportView />}
        {view === 'settings' && <SettingsView onNavigate={setView} />}
      </div>

      {/* Toast notifications - Theme-aware style */}
      <Toaster
        position="top-right"
        toastOptions={{
          className: 'glass-panel font-mono text-cyber-text-primary',
          style: {
            fontFamily: 'JetBrains Mono, monospace',
          },
        }}
      />
    </div>
  )
}

export default App