frontend/src/App.jsx

import React, { useState, useEffect } from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Leaderboard from './components/Leaderboard';
import ExampleViewer from './components/ExampleViewer';
import api from './api';

function App() {
  const [benchmarks, setBenchmarks] = useState([]);
  const [selectedBenchmark, setSelectedBenchmark] = useState('image');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch available benchmarks
    async function fetchBenchmarks() {
      try {
        setLoading(true);
        const response = await api.getBenchmarks();
        if (response.success) {
          setBenchmarks(response.benchmarks);
          // Set default benchmark if available
          if (response.benchmarks.length > 0) {
            setSelectedBenchmark(response.benchmarks[0].id);
          }
        } else {
          setError(response.error || 'Failed to fetch benchmarks');
          // Set default benchmarks
          setBenchmarks([
            { id: 'image', name: 'Image' },
            { id: 'audio', name: 'Audio' }
          ]);
          setSelectedBenchmark('image');
        }
      } catch (err) {
        console.error('Error in benchmark fetch:', err);
        setError(err.message || 'An error occurred');
        // Set default benchmarks
        setBenchmarks([
          { id: 'image', name: 'Image' },
          { id: 'audio', name: 'Audio' }
        ]);
        setSelectedBenchmark('image');
      } finally {
        setLoading(false);
      }
    }

    fetchBenchmarks();
  }, []);

  const handleBenchmarkChange = (benchmarkId) => {
    setSelectedBenchmark(benchmarkId);
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      <header className="bg-primary py-6 text-white shadow-md">
        <div className="container mx-auto px-4">
          <h1 className="text-3xl font-display font-semibold">OmniSealBench</h1>
          <p className="mt-1 font-light">A Comprehensive Benchmark for Watermarking Techniques</p>
        </div>
      </header>

      <nav className="bg-white shadow-sm">
        <div className="container mx-auto px-4 py-3 flex flex-wrap justify-between items-center">
          <ul className="flex space-x-6">
            <li>
              <Link to="/" className="text-secondary hover:text-primary font-medium transition-colors">Leaderboard</Link>
            </li>
            <li>
              <Link to="/examples" className="text-secondary hover:text-primary font-medium transition-colors">Examples</Link>
            </li>
          </ul>

          {benchmarks.length > 0 && (
            <div className="mt-3 sm:mt-0 flex items-center">
              <label className="mr-2 text-sm text-secondary">Benchmark:</label>
              <select
                value={selectedBenchmark}
                onChange={(e) => handleBenchmarkChange(e.target.value)}
                className="border rounded px-3 py-1 bg-white focus:outline-none focus:ring-2 focus:ring-primary/50"
              >
                {benchmarks.map(benchmark => (
                  <option key={benchmark.id} value={benchmark.id}>
                    {benchmark.name}
                  </option>
                ))}
              </select>
            </div>
          )}
        </div>
      </nav>

      <main className="flex-grow py-8">
        <div className="container mx-auto px-4">
          {loading ? (
            <div className="flex justify-center items-center p-12">
              <div className="animate-pulse text-primary font-medium">Loading...</div>
            </div>
          ) : (
            <Routes>
              <Route
                path="/"
                element={<Leaderboard benchmark={selectedBenchmark} />}
              />
              <Route
                path="/examples"
                element={<ExampleViewer benchmark={selectedBenchmark} />}
              />
              <Route
                path="*"
                element={<div className="p-8 text-center text-gray-600">Page not found</div>}
              />
            </Routes>
          )}
        </div>
      </main>

      <footer className="bg-gray-100 py-6 border-t">
        <div className="container mx-auto px-4 text-center text-gray-600 text-sm">
          <p>&copy; {new Date().getFullYear()} OmniSealBench. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

export default App;