import { useState, useEffect, createContext, useContext } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AppLayout } from './components/layout/AppLayout'
import { AppSkeleton } from './components/common/AppSkeleton'
import { useSettingsStore } from './stores/settingsStore'
import { fetchUserProfile, logout, type UserProfile } from './lib/api'
import { Dashboard } from './pages/Dashboard'
import { Devices } from './pages/Devices'
import { WanPage } from './pages/WanPage'
import { FirewallPage } from './pages/FirewallPage'
import { PppoePage } from './pages/PppoePage'
import { DhcpPage } from './pages/DhcpPage'
import { DnsPage } from './pages/DnsPage'
import { SettingsPage } from './pages/SettingsPage'
import { MembersPage } from './pages/MembersPage'
import { StatsPage } from './pages/StatsPage'

// ── Auth Context ──

interface AuthState {
  user: UserProfile | null
  loading: boolean
  isAdmin: boolean
}

const AuthContext = createContext<AuthState>({ user: null, loading: true, isAdmin: false })
export const useAuth = () => useContext(AuthContext)

// ── App ──

export default function App() {
  const [user, setUser] = useState<UserProfile | null>(null)
  const [loading, setLoading] = useState(true)
  const loadSettings = useSettingsStore((s) => s.load)

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

  useEffect(() => {
    fetchUserProfile()
      .then((profile: UserProfile) => {
        setUser(profile)
        setLoading(false)
      })
      .catch(() => {
        setLoading(false)
      })
  }, [])

  const isAdmin = user?.roles?.some((r: { name: string; isSystem: boolean }) => r.isSystem) ?? false

  if (loading) return <AppSkeleton />

  return (
    <AuthContext.Provider value={{ user, loading, isAdmin }}>
      <BrowserRouter>
        <AppLayout userProfile={user} onLogout={logout}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/devices" element={<Devices />} />
            <Route path="/wan" element={<WanPage />} />
            <Route path="/wan/pppoe" element={<PppoePage />} />
            <Route path="/wan/dhcp" element={<DhcpPage />} />
            <Route path="/firewall" element={<FirewallPage />} />
            <Route path="/firewall/dns" element={<DnsPage />} />
            <Route path="/members" element={<MembersPage />} />
            <Route path="/stats" element={<StatsPage />} />
            <Route path="/settings" element={<SettingsPage />} />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </AppLayout>
      </BrowserRouter>
    </AuthContext.Provider>
  )
}