import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import ProtectedRoute from './components/ProtectedRoute';
import UserMenu from './components/UserMenu';
import ThemeToggle from './components/ThemeToggle';
import FamilyGate from './components/FamilyGate';
import Login from './pages/Login';
import Register from './pages/Register';
import AuthCallback from './pages/AuthCallback';
import Cookbooks from './pages/Cookbooks';
import CookbookDetail from './pages/CookbookDetail';
import EditCookbook from './pages/EditCookbook';
import RecipeList from './pages/RecipeList';
import RecipeDetail from './pages/RecipeDetail';
import RecipeImport from './pages/RecipeImport';
import NewRecipe from './pages/NewRecipe';
import UnifiedEditRecipe from './pages/UnifiedEditRecipe';
import CookingMode from './pages/CookingMode';
import Family from './pages/Family';
import { APP_VERSION } from './version';
import './App.css';

function App() {
  return (
    <Router>
      <ThemeProvider>
        <AuthProvider>
          <FamilyGate>
          <div className="app">
            <header className="header">
              <div className="container">
                <div className="logo-container">
                  <h1 className="logo">
                    <Link to="/" title={`Basil v${APP_VERSION}`}>🌿 Basil</Link>
                  </h1>
                  <span className="version" title={`Version ${APP_VERSION}`}>v{APP_VERSION}</span>
                </div>
                <nav>
                  <Link to="/">Cookbooks</Link>
                  <Link to="/recipes">All Recipes</Link>
                  <Link to="/recipes/new">New Recipe</Link>
                  <Link to="/recipes/import">Import Recipe</Link>
                </nav>
                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                  <ThemeToggle />
                  <UserMenu />
                </div>
              </div>
            </header>

          <main className="main">
            <div className="container">
              <Routes>
                {/* Public Routes */}
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="/auth/callback" element={<AuthCallback />} />

                {/* Protected Routes */}
                <Route path="/" element={<ProtectedRoute><Cookbooks /></ProtectedRoute>} />
                <Route path="/cookbooks/:id" element={<ProtectedRoute><CookbookDetail /></ProtectedRoute>} />
                <Route path="/cookbooks/:id/edit" element={<ProtectedRoute><EditCookbook /></ProtectedRoute>} />
                <Route path="/recipes" element={<ProtectedRoute><RecipeList /></ProtectedRoute>} />
                <Route path="/recipes/:id" element={<ProtectedRoute><RecipeDetail /></ProtectedRoute>} />
                <Route path="/recipes/:id/edit" element={<ProtectedRoute><UnifiedEditRecipe /></ProtectedRoute>} />
                <Route path="/recipes/:id/cook" element={<ProtectedRoute><CookingMode /></ProtectedRoute>} />
                <Route path="/recipes/new" element={<ProtectedRoute><NewRecipe /></ProtectedRoute>} />
                <Route path="/recipes/import" element={<ProtectedRoute><RecipeImport /></ProtectedRoute>} />
                <Route path="/family" element={<ProtectedRoute><Family /></ProtectedRoute>} />
              </Routes>
            </div>
          </main>

          <footer className="footer">
            <div className="container">
              <p>Basil - Your Recipe Manager</p>
            </div>
          </footer>
        </div>
          </FamilyGate>
        </AuthProvider>
      </ThemeProvider>
    </Router>
  );
}

export default App;