import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { AuthProvider } from '@/stores/authStore';
import { ProtectedRoute, AdminRoute } from '@/components/features/auth/ProtectedRoute';
import { HomePage } from '@/pages/HomePage';
import { LandingPage } from '@/pages/LandingPage';
import { LoginPage } from '@/pages/LoginPage';
import { RegisterPage } from '@/pages/RegisterPage';
import { StoryPage } from '@/pages/StoryPage';
import { AdminDashboardPage } from '@/pages/AdminDashboardPage';
import { AdminUsersPage } from '@/pages/AdminUsersPage';
import { AdminReportsPage } from '@/pages/AdminReportsPage';
import { AdminStoryGeneratorPage } from '@/pages/AdminStoryGeneratorPage';
import { AdminUserDetailPage } from '@/pages/AdminUserDetailPage';
import { AdminLayout } from '@/components/features/admin/AdminLayout';
import './index.css';

// Re-export for easier imports
export { AuthProvider } from '@/stores/authStore';

function NotFoundPage() {
  return (
    <div className="not-found-page">
      <h1>404</h1>
      <p>Page not found</p>
      <Link to="/">Go to Home</Link>
    </div>
  );
}

// Layout component with header and footer
function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="app-container">
      <header className="app-header">
        <Link to="/" className="app-title">
          <h1>DeutschLernen</h1>
        </Link>
        <nav className="app-nav">
          <Link to="/">Home</Link>
          <Link to="/story/1">Stories</Link>
        </nav>
      </header>

      <main className="app-main">{children}</main>

      <footer className="app-footer">
        <p>© {new Date().getFullYear()} DeutschLernen</p>
      </footer>
    </div>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          {/* Public routes (no authentication required) */}
          <Route path="/landing" element={<LandingPage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />

          {/* Protected routes (require authentication) */}
          <Route
            path="/"
            element={
              <ProtectedRoute>
                <AppLayout>
                  <HomePage />
                </AppLayout>
              </ProtectedRoute>
            }
          />
          <Route
            path="/story/:levelId"
            element={
              <ProtectedRoute>
                <AppLayout>
                  <StoryPage />
                </AppLayout>
              </ProtectedRoute>
            }
          />

          {/* Admin routes (require authentication + admin role) */}
          <Route
            path="/admin"
            element={
              <AdminRoute>
                <AdminLayout />
              </AdminRoute>
            }
          >
            <Route index element={<AdminDashboardPage />} />
            <Route path="dashboard" element={<AdminDashboardPage />} />
            <Route path="users" element={<AdminUsersPage />} />
            <Route path="users/:id" element={<AdminUserDetailPage />} />
            <Route path="reports" element={<AdminReportsPage />} />
            <Route path="stories" element={<AdminStoryGeneratorPage />} />
          </Route>

          {/* Catch-all route */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}