import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { useAuth } from '@/hooks/useAuth'
import Sidebar from '@/components/Sidebar'
import LoginPage from '@/pages/LoginPage'
import SetupWizardPage from '@/pages/SetupWizardPage'
import DashboardPage from '@/pages/DashboardPage'
import TasksPage from '@/pages/TasksPage'
import TaskDetailPage from '@/pages/TaskDetailPage'
import ProjectsPage from '@/pages/ProjectsPage'
import ProjectDetailPage from '@/pages/ProjectDetailPage'
import MilestonesPage from '@/pages/MilestonesPage'
import MilestoneDetailPage from '@/pages/MilestoneDetailPage'
import NotificationsPage from '@/pages/NotificationsPage'
import RoleEditorPage from '@/pages/RoleEditorPage'
import MonitorPage from '@/pages/MonitorPage'
import ProposesPage from '@/pages/ProposesPage'
import ProposeDetailPage from '@/pages/ProposeDetailPage'
import UsersPage from '@/pages/UsersPage'
import axios from 'axios'

const WIZARD_PORT = Number(import.meta.env.VITE_WIZARD_PORT) || 18080
const WIZARD_BASE = `http://127.0.0.1:${WIZARD_PORT}`

type AppState = 'checking' | 'setup' | 'ready'

export default function App() {
  const [appState, setAppState] = useState<AppState>('checking')
  const { user, loading, login, logout } = useAuth()

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

  const checkInitialized = async () => {
    try {
      const res = await axios.get(`${WIZARD_BASE}/api/v1/config/harborforge.json`, {
        timeout: 5000,
      })
      const cfg = res.data || {}
      if (cfg.backend_url) {
        localStorage.setItem('HF_BACKEND_BASE_URL', cfg.backend_url)
      }
      if (cfg.initialized === true) {
        setAppState('ready')
      } else {
        setAppState('setup')
      }
    } catch {
      // Wizard unreachable or config doesn't exist → setup needed
      setAppState('setup')
    }
  }

  if (appState === 'checking') {
    return <div className="loading">Checking configuration status...</div>
  }

  if (appState === 'setup') {
    return <SetupWizardPage wizardBase={WIZARD_BASE} onComplete={checkInitialized} />
  }

  if (loading) return <div className="loading">Loading...</div>

  if (!user) {
    return (
      <BrowserRouter>
        <div className="app-layout">
          <Sidebar user={null} onLogout={logout} />
          <main className="main-content">
            <Routes>
              <Route path="/roles" element={<RoleEditorPage />} />
              <Route path="/users" element={<UsersPage />} />
              <Route path="/monitor" element={<MonitorPage />} />
              <Route path="/login" element={<LoginPage onLogin={login} />} />
              <Route path="*" element={<Navigate to="/monitor" />} />
            </Routes>
          </main>
        </div>
      </BrowserRouter>
    )
  }

  return (
    <BrowserRouter>
      <div className="app-layout">
        <Sidebar user={user} onLogout={logout} />
        <main className="main-content">
          <Routes>
            <Route path="/" element={<DashboardPage />} />
            <Route path="/tasks" element={<TasksPage />} />
            <Route path="/tasks/:id" element={<TaskDetailPage />} />
            <Route path="/projects" element={<ProjectsPage />} />
            <Route path="/projects/:id" element={<ProjectDetailPage />} />
            <Route path="/milestones" element={<MilestonesPage />} />
            <Route path="/milestones/:id" element={<MilestoneDetailPage />} />
            <Route path="/proposes" element={<ProposesPage />} />
            <Route path="/proposes/:id" element={<ProposeDetailPage />} />
            <Route path="/notifications" element={<NotificationsPage />} />
            <Route path="/roles" element={<RoleEditorPage />} />
            <Route path="/users" element={<UsersPage />} />
            <Route path="/monitor" element={<MonitorPage />} />
            <Route path="*" element={<Navigate to="/" />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  )
}