/* @component-map
 * App — Main container, layout with left/right panels, navigation, toast system
 * NavBar — Top navigation bar with logo, notifications, share, user chip
 * LeftPanel — Hero section, stats, next up, game library, leaderboard
 * RightPanel — Calendar, upcoming events, food/potluck sidebar
 * HostModal — Modal for hosting a new game night
 * RsvpModal — Modal for responding to pending invitations
 * AvatarModal — Modal for customizing user profile/avatar
 * NotifModal — Modal for viewing notifications
 * EventDetailModal — Modal for viewing event details, RSVP, food claims, post-game notes
 * ShareModal — Modal for sharing invite link
 * AvatarSVG — Renders an SVG avatar from config
 * @end-component-map */

import { useCollection, useAuth, useNotifications, useBroadcast } from '@deplixo/sdk';
import { NavBar } from './components/NavBar.jsx';
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 { AvatarModal } from './components/AvatarModal.jsx';
import { NotifModal } from './components/NotifModal.jsx';
import { EventDetailModal } from './components/EventDetailModal.jsx';
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { ShareModal } from './components/ShareModal.jsx';

export const AppContext = createContext();

function App() {
  const { user, loading } = useAuth();
  const [activeModal, setActiveModal] = useState(null);
  const [activeEventId, setActiveEventId] = useState(null);
  const [toast, setToast] = useState('');

  useEffect(() => {
    if (!loading && !user) {
      window.location.href = '/login';
    }
  }, [loading, user]);

  const showToast = useCallback((msg) => {
    setToast(msg);
    setTimeout(() => setToast(''), 3500);
  }, []);

  const openModal = useCallback((name) => setActiveModal(name), []);
  const closeModal = useCallback(() => setActiveModal(null), []);

  const ctx = { user, activeModal, openModal, closeModal, showToast, activeEventId, setActiveEventId };

  return (
    <AppContext.Provider value={ctx}>
      <NavBar />
      <div className="app">
        <LeftPanel />
        <RightPanel />
      </div>
      {activeModal === 'host' && <HostModal />}
      {activeModal === 'rsvp' && <RsvpModal />}
      {activeModal === 'avatar' && <AvatarModal />}
      {activeModal === 'notif' && <NotifModal />}
      {activeModal === 'eventDetail' && <EventDetailModal />}
      {activeModal === 'share' && <ShareModal />}
      <div className={`toast ${toast ? 'show' : ''}`}>{toast}</div>
    </AppContext.Provider>
  );
}

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