/* @component-map
 * App — Main container, handles layout and view switching between panels
 * LeftPanel — User badge, hero section, notifications, host/RSVP buttons
 * RightPanel — Stats row, calendar, upcoming events list
 * HostModal — Modal for hosting/scheduling a new game night
 * RsvpModal — Modal for viewing and responding to invitations
 * EventDetailModal — Modal for viewing full event details
 * Calendar — Monthly calendar grid with day selection
 * @end-component-map */

import { LeftPanel } from './components/LeftPanel.jsx';
import { RightPanel } from './components/RightPanel.jsx';
import { HostModal } from './components/HostModal.jsx';
import { RsvpModal } from './components/RsvpModal.jsx';
import { useState } from 'react';
import { EventDetailModal } from './components/EventDetailModal.jsx';

function App() {
  const [hostOpen, setHostOpen] = useState(false);
  const [rsvpOpen, setRsvpOpen] = useState(false);
  const [detailEvent, setDetailEvent] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="app-shell">
      <div className="orb orb-1"></div>
      <div className="orb orb-2"></div>
      <div className="orb orb-3"></div>
      <div className="app-wrapper">
        <LeftPanel
          onHost={() => setHostOpen(true)}
          onRsvp={() => setRsvpOpen(true)}
        />
        <RightPanel
          onSelectEvent={setDetailEvent}
          selectedDate={selectedDate}
          onSelectDate={setSelectedDate}
        />
      </div>
      {hostOpen && <HostModal onClose={() => setHostOpen(false)} />}
      {rsvpOpen && <RsvpModal onClose={() => setRsvpOpen(false)} />}
      {detailEvent && (
        <EventDetailModal
          event={detailEvent}
          onClose={() => setDetailEvent(null)}
        />
      )}
    </div>
  );
}

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