import { useState, useEffect } from 'react'
import { GoogleOAuthProvider } from '@react-oauth/google'
import { MainLayout } from './components/layout/MainLayout'
import { LoginPage } from './components/auth/LoginPage'
import { registerMainTabSwitcher } from './hooks/useSubMenu'
import { useAuthStore } from './store/authStore'
import { useMenuStore } from './store/menuStore'
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'

const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || ''

function App() {
  const [activeMainTab, setActiveMainTab] = useState<MainTab>('prediction')
  const { isAuthenticated, isLoading, checkSession } = useAuthStore()
  const { loadMenuConfig } = useMenuStore()

  useEffect(() => {
    checkSession()
  }, [checkSession])

  useEffect(() => {
    if (isAuthenticated) {
      loadMenuConfig()
    }
  }, [isAuthenticated, loadMenuConfig])

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

  // 세션 확인 중 스플래시
  if (isLoading) {
    return (
      <div style={{
        width: '100vw', height: '100vh', display: 'flex',
        flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        background: '#001028', gap: 16,
      }}>
        <img src="/wing_logo_text_white.svg" alt="WING" style={{ height: 28, opacity: 0.8 }} />
        <div style={{
          width: 32, height: 32, border: '3px solid rgba(6,182,212,0.2)',
          borderTop: '3px solid rgba(6,182,212,0.8)', borderRadius: '50%',
          animation: 'loginSpin 0.8s linear infinite',
        }} />
      </div>
    )
  }

  // 미인증 → 로그인 페이지
  if (!isAuthenticated) {
    return <LoginPage />
  }

  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>
  )
}

function AppWithProviders() {
  if (!GOOGLE_CLIENT_ID) {
    return <App />
  }
  return (
    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
      <App />
    </GoogleOAuthProvider>
  )
}

export default AppWithProviders