import { BrowserRouter, HashRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider } from './contexts/AuthContext'
import { useAuth } from './hooks/useAuth'
import LandingPage from './components/LandingPage'
import Login from './components/Login'
import Register from './components/Register'
import CharacterSelection from './components/CharacterSelection'
import CharacterCreation from './components/CharacterCreation'
import Game from './components/Game'
import Profile from './components/Profile'
import Leaderboards from './components/Leaderboards'
import GameLayout from './components/GameLayout'
import AccountPage from './components/AccountPage'
import './App.css'

// Use HashRouter for Electron (file:// protocol), BrowserRouter for web
const isElectron = window.location.protocol === 'file:'
const Router = isElectron ? HashRouter : BrowserRouter

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, loading } = useAuth()

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

  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />
}

function CharacterRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, currentCharacter, loading } = useAuth()

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

  if (!isAuthenticated) {
    return <Navigate to="/login" />
  }

  if (!currentCharacter) {
    return <Navigate to="/characters" />
  }

  return <>{children}</>
}

function App() {
  return (
    <AuthProvider>
      <Router>
        <div className="app">
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />

            <Route
              path="/characters"
              element={
                <PrivateRoute>
                  <CharacterSelection />
                </PrivateRoute>
              }
            />

            <Route
              path="/create-character"
              element={
                <PrivateRoute>
                  <CharacterCreation />
                </PrivateRoute>
              }
            />

            <Route
              path="/account"
              element={
                <PrivateRoute>
                  <AccountPage />
                </PrivateRoute>
              }
            />

            <Route element={<GameLayout />}>
              <Route
                path="/game"
                element={
                  <CharacterRoute>
                    <Game />
                  </CharacterRoute>
                }
              />

              <Route
                path="/profile/:playerId"
                element={
                  <PrivateRoute>
                    <Profile />
                  </PrivateRoute>
                }
              />

              <Route
                path="/leaderboards"
                element={
                  <PrivateRoute>
                    <Leaderboards />
                  </PrivateRoute>
                }
              />
            </Route>
          </Routes>
        </div>
      </Router>
    </AuthProvider>
  )
}

export default App