import React from 'react'
import { Routes, Route, Navigate, Link } from 'react-router-dom'
import { BookOpen, CheckSquare, LayoutDashboard, Trophy, Settings, LogOut } from 'lucide-react'
import { useApp } from './store/AppContext'

import Login from './pages/Login'
import Dashboard from './pages/Dashboard'

import Admin from './pages/Admin'
import Leren from './pages/Leren'
import Testen from './pages/Testen'

// Placeholder components for routing structure
const Leaderboard = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Leaderboard</h1><p className="mt-4">See who is on top!</p></div>

// Protected Route Wrapper
const ProtectedRoute = ({ children, requireAdmin }) => {
  const { state, logout } = useApp()
  
  if (state.isLoading) return <div className="p-8">Loading...</div>
  
  if (!state.currentUser) {
    return <Navigate to="/login" replace />
  }

  if (requireAdmin && state.currentUser.role !== 'admin') {
    return <Navigate to="/" replace />
  }

  return (
    <div className="min-h-screen bg-bg text-fg font-sans flex flex-col pb-16 md:pb-0">
      {/* Top Navigation Bar */}
      <nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center sticky top-0 z-50">
        <Link to="/" className="flex items-center">
          <img src="/images/logo-light.png" alt="Respellion Logo" className="h-6 md:h-8 object-contain" />
        </Link>
        
        {/* Desktop Links */}
        <div className="hidden md:flex items-center gap-6 text-sm font-medium">
          <Link to="/" className="hover:text-accent-soft transition-colors flex items-center gap-2"><LayoutDashboard size={16}/> Dashboard</Link>
          <Link to="/learn" className="hover:text-accent-soft transition-colors flex items-center gap-2"><BookOpen size={16}/> Learn</Link>
          <Link to="/test" className="hover:text-accent-soft transition-colors flex items-center gap-2"><CheckSquare size={16}/> Test</Link>
          <Link to="/leaderboard" className="hover:text-accent-soft transition-colors flex items-center gap-2"><Trophy size={16}/> Leaderboard</Link>
          {state.currentUser.role === 'admin' && (
            <Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-2">
              <Settings size={16}/> Admin
            </Link>
          )}
          <button 
            onClick={logout}
            className="ml-4 border border-bg-warm/30 rounded-[var(--r-pill)] px-3 py-1 hover:bg-paper/10 transition-colors flex items-center gap-2"
          >
            <LogOut size={14}/> Sign Out
          </button>
        </div>
        
        {/* Mobile top-right: just logout icon */}
        <div className="flex md:hidden items-center">
          <button onClick={logout} className="p-2 hover:bg-paper/10 rounded-full transition-colors text-paper">
             <LogOut size={20}/>
          </button>
        </div>
      </nav>

      {/* Mobile Bottom Navigation */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-paper border-t border-bg-warm flex justify-around items-center p-2 z-50">
          <Link to="/" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><LayoutDashboard size={20}/><span className="text-[10px] mt-1 font-medium">Home</span></Link>
          <Link to="/learn" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><BookOpen size={20}/><span className="text-[10px] mt-1 font-medium">Learn</span></Link>
          <Link to="/test" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><CheckSquare size={20}/><span className="text-[10px] mt-1 font-medium">Test</span></Link>
          <Link to="/leaderboard" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><Trophy size={20}/><span className="text-[10px] mt-1 font-medium">Score</span></Link>
          {state.currentUser.role === 'admin' && (
            <Link to="/admin" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><Settings size={20}/><span className="text-[10px] mt-1 font-medium">Admin</span></Link>
          )}
      </nav>

      <main className="flex-1 w-full max-w-[var(--max)] mx-auto">
        {children}
      </main>
    </div>
  )
}

function App() {
  const { state } = useApp()

  if (state.isLoading) return <div className="p-8 flex items-center justify-center min-h-screen">Loading application...</div>

  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
      <Route path="/learn" element={<ProtectedRoute><Leren /></ProtectedRoute>} />
      <Route path="/test" element={<ProtectedRoute><Testen /></ProtectedRoute>} />
      <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
      <Route path="/admin/*" element={<ProtectedRoute requireAdmin={true}><Admin /></ProtectedRoute>} />
    </Routes>
  )
}

export default App