// frontend/src/App.jsx
import React, { useState } from 'react';
import Login from './components/Login';
import Register from './components/Register';
import Navbar from './components/Navbar';
import TableManagement from './components/TableManagement';
import Menu from './components/Menu';
import Reservations from './components/Reservations';
import Payments from './components/Payments';
import Reports from './components/Reports';

export default function App() {
  const [token, setToken] = useState(localStorage.getItem('token') || null);
  const [activeTab, setActiveTab] = useState('Table Management');
  
  // State to manage switching between Login and Register views when unauthenticated
  const [showRegister, setShowRegister] = useState(false);

  const handleLogout = () => {
    setToken(null);
    localStorage.removeItem('token');
  };

  // 1. Unauthenticated Gateway
  if (!token) {
    return showRegister 
      ? <Register toggleView={() => setShowRegister(false)} /> 
      : <Login setToken={setToken} toggleView={() => setShowRegister(true)} />;
  }

  // 2. Authenticated System Dashboard
  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans">
      <Navbar activeTab={activeTab} setActiveTab={setActiveTab} handleLogout={handleLogout} />
      
      <main className="flex-1 max-w-7xl w-full mx-auto p-4 md:p-8 transition-all duration-300">
        <header className="mb-8">
          <h1 className="text-2xl md:text-3xl font-black text-white tracking-tight">{activeTab}</h1>
          <p className="text-xs md:text-sm text-slate-400 mt-1">Management Workspace / Taste Of Rwanda</p>
        </header>

        <section className="bg-white/[0.02] backdrop-blur-md border border-white/10 rounded-3xl p-6 min-h-[60vh] shadow-xl">
          {activeTab === 'Table Management' && <TableManagement token={token} />}
          {activeTab === 'Menu' && <Menu token={token} />}
          {activeTab === 'Reservations' && <Reservations token={token} />}
          {activeTab === 'Payments' && <Payments token={token} />}
          {activeTab === 'Reports' && <Reports />}
        </section>
      </main>
    </div>
  );
}