/* @component-map
 * App — Main container, handles auth, view switching, layout
 * Sidebar — Navigation sidebar with user info
 * Topbar — Top bar with page title and new ticket button
 * Dashboard — Dashboard view with stats and recent tickets
 * TicketList — All tickets view with filters and search
 * MyTickets — Current user's tickets view
 * ManageTickets — Admin ticket management view
 * TicketDetail — Ticket detail view with comments
 * NewTicketModal — Modal for creating new tickets
 * Toast — Toast notification component
 * @end-component-map */

import { useCollection, useAuth, useUpload, useNotifications } from '@deplixo/sdk';
import { Sidebar } from './components/Sidebar.jsx';
import { Topbar } from './components/Topbar.jsx';
import { Dashboard } from './components/Dashboard.jsx';
import { TicketList } from './components/TicketList.jsx';
import { MyTickets } from './components/MyTickets.jsx';
import { ManageTickets } from './components/ManageTickets.jsx';
import { TicketDetail } from './components/TicketDetail.jsx';
import { NewTicketModal } from './components/NewTicketModal.jsx';
import { Toast } from './components/Toast.jsx';
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { AppProvider, useAppContext } from './components/AppContext.jsx';

function AppInner() {
  const context = useContext(AppProvider);

  return (
    <div className="app">
      <Sidebar />
      <div className="main">
        <Topbar />
        {context?.view === 'dashboard' && <Dashboard />}
        {context?.view === 'tickets' && <TicketList />}
        {context?.view === 'my-tickets' && <MyTickets />}
        {context?.view === 'manage' && <ManageTickets />}
        {context?.view === 'detail' && <TicketDetail />}
      </div>
      {context?.showModal && <NewTicketModal />}
      <Toast />
    </div>
  );
}

function App() {
  const { user, loading } = useAuth();

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

  if (loading || !user) {
    return (
      <div className="loading-screen">
        <div className="spinner"></div>
        <p>Loading HelpDesk...</p>
      </div>
    );
  }

  return (
    <AppProvider user={user}>
      <AppInner />
    </AppProvider>
  );
}

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