/* @component-map
 * App — Main container, handles tab navigation and toast notifications
 * SignupBoard — Shows dish cards for claiming, attendee count
 * LineupView — Full lineup with stats and category grouping
 * AddDishForm — Form to add new dishes with photo upload
 * ClaimModal — Modal for claiming/unclaiming dishes
 * NotificationPanel — Notification bell and dropdown panel
 * @end-component-map */

import { SignupBoard } from './components/SignupBoard.jsx';
import { LineupView } from './components/LineupView.jsx';
import { AddDishForm } from './components/AddDishForm.jsx';
import { useCallback, useState } from 'react';
import { NotificationPanel } from './components/NotificationPanel.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('signup');
  const [toast, setToast] = useState(null);

  const showToast = useCallback((message) => {
    setToast(message);
    setTimeout(() => setToast(null), 3000);
  }, []);

  const switchTab = useCallback((tab) => {
    setActiveTab(tab);
  }, []);

  return (
    <div className="app-wrapper">
      <header className="app-header">
        <div className="header-inner">
          <div className="header-left">
            <span className="header-emoji">🏈</span>
            <div className="header-titles">
              <h1 className="app-title">Game Day Potluck</h1>
              <p className="app-subtitle">Bring your A-game & your best dish!</p>
            </div>
          </div>
          <div className="header-right">
            <NotificationPanel />
          </div>
        </div>
      </header>

      <nav className="tab-nav">
        <button className={`tab-btn ${activeTab === 'signup' ? 'active' : ''}`} onClick={() => switchTab('signup')}>🍕 Sign Up</button>
        <button className={`tab-btn ${activeTab === 'lineup' ? 'active' : ''}`} onClick={() => switchTab('lineup')}>📋 Lineup</button>
        <button className={`tab-btn ${activeTab === 'add' ? 'active' : ''}`} onClick={() => switchTab('add')}>➕ Add Dish</button>
      </nav>

      {activeTab === 'signup' && <SignupBoard showToast={showToast} switchTab={switchTab} />}
      {activeTab === 'lineup' && <LineupView switchTab={switchTab} />}
      {activeTab === 'add' && <AddDishForm showToast={showToast} switchTab={switchTab} />}

      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);