import React, { useState } from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
import { ToastProvider } from './components/Toast';
import { branding } from './config/branding';
import Logo from './components/Logo';
import ThemeToggle from './components/ThemeToggle';
import InstallPrompt from './components/InstallPrompt';
import SafariInstallPrompt from './components/SafariInstallPrompt';
import PresenceBar from './components/PresenceBar';
import Home from './pages/Home';
import Login from './pages/Login';
import Picker from './pages/Picker';
import Manager from './pages/Manager';
import History from './pages/History';
import SessionDetail from './pages/SessionDetail';

function App() {
  const { isAuthenticated, logout } = useAuth();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const closeMobileMenu = () => setMobileMenuOpen(false);

  return (
    <ToastProvider>
    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors flex flex-col">
      {/* Navigation */}
      <nav className="bg-indigo-600 dark:bg-indigo-800 text-white shadow-lg flex-shrink-0">
        <div className="container mx-auto px-2 sm:px-4">
          <div className="flex justify-between items-center py-2 sm:py-3">
            {/* Logo and Title */}
            <Link to="/" className="flex items-center gap-2 hover:opacity-90 transition min-w-0" onClick={closeMobileMenu}>
              <Logo size="sm" className="flex-shrink-0" />
              <div className="hidden sm:block">
                <div className="text-lg sm:text-xl font-bold">{branding.app.name}</div>
              </div>
              <div className="sm:hidden text-sm font-bold">Jackbox Game Picker</div>
            </Link>
            
            {/* Desktop Navigation Links */}
            <div className="hidden sm:flex gap-1 sm:gap-4 items-center text-sm sm:text-base">
              <Link to="/" className="hover:text-indigo-200 dark:hover:text-indigo-300 transition px-2 py-1">
                Home
              </Link>
              <Link to="/history" className="hover:text-indigo-200 dark:hover:text-indigo-300 transition px-2 py-1">
                History
              </Link>
              
              {isAuthenticated && (
                <>
                  <Link to="/picker" className="hover:text-indigo-200 dark:hover:text-indigo-300 transition px-2 py-1">
                    Picker
                  </Link>
                  <Link to="/manager" className="hover:text-indigo-200 dark:hover:text-indigo-300 transition px-2 py-1">
                    Manager
                  </Link>
                  <button
                    onClick={logout}
                    className="bg-indigo-700 dark:bg-indigo-900 hover:bg-indigo-800 dark:hover:bg-indigo-950 px-2 sm:px-4 py-1 sm:py-2 rounded transition text-xs sm:text-sm"
                  >
                    Logout
                  </button>
                </>
              )}
              
              {!isAuthenticated && (
                <Link
                  to="/login"
                  className="bg-indigo-700 dark:bg-indigo-900 hover:bg-indigo-800 dark:hover:bg-indigo-950 px-2 sm:px-4 py-1 sm:py-2 rounded transition text-xs sm:text-sm"
                >
                  Login
                </Link>
              )}
              
              {/* Theme Toggle */}
              <ThemeToggle />
            </div>

            {/* Mobile: Theme Toggle and Hamburger */}
            <div className="flex sm:hidden items-center gap-2">
              <ThemeToggle />
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="p-2 hover:bg-indigo-700 dark:hover:bg-indigo-900 rounded transition"
                aria-label="Toggle menu"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  {mobileMenuOpen ? (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  ) : (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                  )}
                </svg>
              </button>
            </div>
          </div>

          {/* Mobile Menu Dropdown */}
          {mobileMenuOpen && (
            <div className="sm:hidden border-t border-indigo-700 dark:border-indigo-900 py-2">
              <div className="flex flex-col space-y-1">
                <Link
                  to="/"
                  onClick={closeMobileMenu}
                  className="px-4 py-2 hover:bg-indigo-700 dark:hover:bg-indigo-900 transition"
                >
                  Home
                </Link>
                <Link
                  to="/history"
                  onClick={closeMobileMenu}
                  className="px-4 py-2 hover:bg-indigo-700 dark:hover:bg-indigo-900 transition"
                >
                  History
                </Link>
                
                {isAuthenticated && (
                  <>
                    <Link
                      to="/picker"
                      onClick={closeMobileMenu}
                      className="px-4 py-2 hover:bg-indigo-700 dark:hover:bg-indigo-900 transition"
                    >
                      Picker
                    </Link>
                    <Link
                      to="/manager"
                      onClick={closeMobileMenu}
                      className="px-4 py-2 hover:bg-indigo-700 dark:hover:bg-indigo-900 transition"
                    >
                      Manager
                    </Link>
                    <button
                      onClick={() => {
                        logout();
                        closeMobileMenu();
                      }}
                      className="px-4 py-2 text-left hover:bg-indigo-700 dark:hover:bg-indigo-900 transition"
                    >
                      Logout
                    </button>
                  </>
                )}
                
                {!isAuthenticated && (
                  <Link
                    to="/login"
                    onClick={closeMobileMenu}
                    className="px-4 py-2 hover:bg-indigo-700 dark:hover:bg-indigo-900 transition"
                  >
                    Login
                  </Link>
                )}
              </div>
            </div>
          )}
        </div>
      </nav>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8 flex-grow">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/history" element={<History />} />
          <Route path="/history/:id" element={<SessionDetail />} />
          <Route path="/picker" element={<Picker />} />
          <Route path="/manager" element={<Manager />} />
        </Routes>
      </main>

      {/* Admin Presence */}
      <PresenceBar />

      {/* Footer */}
      <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
        <div className="container mx-auto px-4 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
            <div className="text-center md:text-left">
              {branding.app.name} v{branding.app.version}
            </div>
            <div className="text-center md:text-right">
              {branding.app.description}
            </div>
          </div>
        </div>
      </footer>

      {/* PWA Install Prompts */}
      <InstallPrompt />
      <SafariInstallPrompt />
    </div>
    </ToastProvider>
  );
}

export default App;

