import { useState, useEffect } from 'react'
import { MainLayout } from './components/layout/MainLayout'
import { registerMainTabSwitcher } from './hooks/useSubMenu'
import { OilSpillView } from './components/views/OilSpillView'
import { ReportsView } from './components/views/ReportsView'
import { HNSView } from './components/views/HNSView'
import { AerialView } from './components/views/AerialView'
import { AssetsView } from './components/views/AssetsView'
import { BoardView } from './components/views/BoardView'
import { WeatherView } from './components/views/WeatherView'
import { IncidentsView } from './components/views/IncidentsView'
import { AdminView } from './components/views/AdminView'
import { PreScatView } from './components/views/PreScatView'
import { RescueView } from './components/views/RescueView'

export type MainTab = 'prediction' | 'hns' | 'rescue' | 'reports' | 'aerial' | 'assets' | 'scat' | 'incidents' | 'board' | 'weather' | 'admin'

function App() {
  const [activeMainTab, setActiveMainTab] = useState<MainTab>('prediction')

  useEffect(() => {
    registerMainTabSwitcher(setActiveMainTab)
  }, [])

  const renderView = () => {
    switch (activeMainTab) {
      case 'prediction':
        return <OilSpillView />
      case 'reports':
        return <ReportsView />
      case 'hns':
        return <HNSView />
      case 'aerial':
        return <AerialView />
      case 'assets':
        return <AssetsView />
      case 'board':
        return <BoardView />
      case 'weather':
        return <WeatherView />
      case 'incidents':
        return <IncidentsView />
      case 'scat':
        return <PreScatView />
      case 'admin':
        return <AdminView />
      case 'rescue':
        return <RescueView />
      default:
        return <div className="flex items-center justify-center h-full text-text-3">준비 중입니다...</div>
    }
  }

  return (
    <MainLayout activeMainTab={activeMainTab} onMainTabChange={setActiveMainTab}>
      {renderView()}
    </MainLayout>
  )
}

export default App