import { BrowserRouter, HashRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider } from './contexts/AuthContext'
import { useAuth } from './hooks/useAuth'
import { AudioProvider } from './contexts/AudioContext'
import BackgroundMusic from './components/BackgroundMusic'
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>
      <AudioProvider>
        <Router>
          <BackgroundMusic />
          <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>
      </AudioProvider>
    </AuthProvider>
  )
}

export default App