import { useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Toaster } from 'react-hot-toast'
import { useAuthStore } from './store'
import { Home } from './pages/Home'
import { Login } from './pages/Login'
import { Register } from './pages/Register'
import { Profile } from './pages/Profile'
import { BetMarketplace } from './pages/BetMarketplace'
import { BetDetails } from './pages/BetDetails'
import { MyBets } from './pages/MyBets'
import { Wallet } from './pages/Wallet'
import { SportEvents } from './pages/SportEvents'
import { Admin } from './pages/Admin'
import { Sports } from './pages/Sports'
import { Live } from './pages/Live'
import { NewBets } from './pages/NewBets'
import { Watchlist } from './pages/Watchlist'
import { HowItWorks } from './pages/HowItWorks'
import { EventDetail } from './pages/EventDetail'
import { MatchDetail } from './pages/MatchDetail'
import {
  RewardsIndex,
  LeaderboardPage,
  AchievementsPage,
  AirdropsPage,
  ActivityPage,
} from './pages/rewards'

// New pages for More dropdown
import VIP from './pages/VIP'
import Affiliate from './pages/Affiliate'
import Referral from './pages/Referral'
import Launchpool from './pages/Launchpool'
import Megadrop from './pages/Megadrop'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
    },
  },
})

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useAuthStore()
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />
}

function AdminRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, user } = useAuthStore()
  if (!isAuthenticated) return <Navigate to="/login" />
  if (!user?.is_admin) return <Navigate to="/" />
  return <>{children}</>
}

function App() {
  const { loadUser } = useAuthStore()

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

  return (
    <QueryClientProvider client={queryClient}>
      <Toaster position="top-right" />
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/sports" element={<Sports />} />
          <Route path="/live" element={<Live />} />
          <Route path="/new-bets" element={<NewBets />} />
          <Route path="/watchlist" element={<Watchlist />} />
          <Route path="/how-it-works" element={<HowItWorks />} />
          <Route path="/events/:id" element={<EventDetail />} />
          <Route path="/matches/:id" element={<MatchDetail />} />

          {/* Rewards Routes */}
          <Route path="/rewards" element={<RewardsIndex />} />
          <Route path="/rewards/leaderboard" element={<LeaderboardPage />} />
          <Route path="/rewards/achievements" element={<AchievementsPage />} />
          <Route path="/rewards/airdrops" element={<AirdropsPage />} />
          <Route path="/rewards/loot-boxes" element={<Navigate to="/rewards/airdrops" replace />} />
          <Route path="/rewards/activity" element={<ActivityPage />} />

          {/* More Dropdown Routes */}
          <Route path="/vip" element={<VIP />} />
          <Route path="/affiliate" element={<Affiliate />} />
          <Route path="/referral" element={<Referral />} />
          <Route path="/launchpool" element={<Launchpool />} />
          <Route path="/megadrop" element={<Megadrop />} />

          <Route
            path="/profile"
            element={
              <PrivateRoute>
                <Profile />
              </PrivateRoute>
            }
          />
          <Route
            path="/marketplace"
            element={
              <PrivateRoute>
                <BetMarketplace />
              </PrivateRoute>
            }
          />
          <Route
            path="/sport-events"
            element={
              <PrivateRoute>
                <SportEvents />
              </PrivateRoute>
            }
          />
          <Route
            path="/bets/:id"
            element={
              <PrivateRoute>
                <BetDetails />
              </PrivateRoute>
            }
          />
          <Route
            path="/my-bets"
            element={
              <PrivateRoute>
                <MyBets />
              </PrivateRoute>
            }
          />
          <Route
            path="/wallet"
            element={
              <PrivateRoute>
                <Wallet />
              </PrivateRoute>
            }
          />
          <Route
            path="/admin"
            element={
              <AdminRoute>
                <Admin />
              </AdminRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  )
}

export default App
