import '../css/app.css'
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import useStore from './store/useStore'

// Pages
import Landing from './pages/Landing'
import Login from './pages/Login'
import Register from './pages/Register'
import Dashboard from './pages/Dashboard'
import BuyData from './pages/BuyData'
import BuyAirtime from './pages/BuyAirtime'
import Electricity from './pages/Electricity'
import Wallet from './pages/Wallet'
import Transactions from './pages/Transactions'
import Profile from './pages/Profile'
import AdminDashboard from './pages/admin/AdminDashboard'
import AdminUsers from './pages/admin/AdminUsers'
import AdminTransactions from './pages/admin/AdminTransactions'
import AdminSupport from './pages/admin/AdminSupport'

// Protected route wrapper
function ProtectedRoute({ children }) {
    const token = localStorage.getItem('token')
    if (!token) return <Navigate to="/login" replace />
    return children
}

// Admin route wrapper
function AdminRoute({ children }) {
    const token = localStorage.getItem('token')
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    if (!token) return <Navigate to="/login" replace />
    if (user?.role !== 'admin') return <Navigate to="/dashboard" replace />
    return children
    
}

// Guest route wrapper - redirect to dashboard if already logged in
function GuestRoute({ children }) {
    const token = localStorage.getItem('token')
    if (token) return <Navigate to="/dashboard" replace />
    return children
}

function App() {
    const initTheme = useStore(s => s.initTheme)
    useEffect(() => { initTheme() }, [])
    return (
        <BrowserRouter>
            <Routes>
                {/* Public */}
                <Route path="/" element={<Landing />} />
                <Route path="/login" element={<GuestRoute><Login /></GuestRoute>} />
                <Route path="/register" element={<GuestRoute><Register /></GuestRoute>} />

                {/* Protected */}
                <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
                <Route path="/buy-data" element={<ProtectedRoute><BuyData /></ProtectedRoute>} />
                <Route path="/airtime" element={<ProtectedRoute><BuyAirtime /></ProtectedRoute>} />
                <Route path="/electricity" element={<ProtectedRoute><Electricity /></ProtectedRoute>} />
                <Route path="/wallet" element={<ProtectedRoute><Wallet /></ProtectedRoute>} />
                <Route path="/transactions" element={<ProtectedRoute><Transactions /></ProtectedRoute>} />
                <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />

                {/* Admin */}
                <Route path="/admin" element={<AdminRoute><AdminDashboard /></AdminRoute>} />
                <Route path="/admin/users" element={<AdminRoute><AdminUsers /></AdminRoute>} />
                <Route path="/admin/transactions" element={<AdminRoute><AdminTransactions /></AdminRoute>} />
                <Route path="/admin/support" element={<AdminRoute><AdminSupport /></AdminRoute>} />
                {/* Fallback */}
                <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
        </BrowserRouter>
    )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)