/* @component-map
 * App — Main container, handles layout and view switching
 * Header — App title and user info pill
 * Stats — Displays open/in-progress/completed counts
 * Filters — Filter buttons for ticket status and priority
 * AddTicket — Form to create new tickets
 * TicketList — Renders filtered and sorted ticket cards
 * TicketCard — Individual ticket with check, status menu, edit, delete
 * EditModal — Modal overlay for editing a ticket
 * ActivityLog — Recent activity log section
 * @end-component-map */

import { useAuth, useCollection, useState } from '@deplixo/sdk';
import { Header } from './components/Header.jsx';
import { Stats } from './components/Stats.jsx';
import { Filters } from './components/Filters.jsx';
import { AddTicket } from './components/AddTicket.jsx';
import { TicketList } from './components/TicketList.jsx';
import { EditModal } from './components/EditModal.jsx';
import { ActivityLog } from './components/ActivityLog.jsx';

function App() {
  const { user, loading: authLoading } = useAuth();
  const { items: tickets, loading: ticketsLoading, add: addTicketItem, update: updateTicket, remove: removeTicket } = useCollection('tickets');
  const { items: activity, loading: activityLoading, add: addActivity } = useCollection('activity');
  const [currentFilter, setCurrentFilter] = useState('all');
  const [editingId, setEditingId] = useState(null);

  if (authLoading || !user) return <div className="loading">Loading...</div>;

  return (
    <div className="app">
      <Header user={user} />
      <Stats tickets={tickets} />
      <Filters currentFilter={currentFilter} setCurrentFilter={setCurrentFilter} />
      <AddTicket addTicket={addTicketItem} addActivity={addActivity} />
      <TicketList
        tickets={tickets}
        loading={ticketsLoading}
        currentFilter={currentFilter}
        user={user}
        updateTicket={updateTicket}
        removeTicket={removeTicket}
        addActivity={addActivity}
        onEdit={setEditingId}
      />
      <EditModal
        editingId={editingId}
        tickets={tickets}
        updateTicket={updateTicket}
        addActivity={addActivity}
        onClose={() => setEditingId(null)}
      />
      <ActivityLog activity={activity} user={user} loading={activityLoading} />
    </div>
  );
}

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