/* @component-map
 * App — Main container, layout with sidebar and main content area, view switching
 * Sidebar — Navigation sidebar with brand, nav items, user card, logout
 * MainContent — Top bar, stats, filters, ticket table
 * TicketDetail — Slide-out panel showing ticket details, comments, admin controls
 * CreateTicketModal — Modal for creating new tickets
 * @end-component-map */

import { Sidebar } from './components/Sidebar.jsx';
import { MainContent } from './components/MainContent.jsx';
import { TicketDetail } from './components/TicketDetail.jsx';
import { CreateTicketModal } from './components/CreateTicketModal.jsx';
import { useAuth } from '@deplixo/sdk';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [currentView, setCurrentView] = React.useState('all');
  const [currentFilter, setCurrentFilter] = React.useState('all');
  const [selectedTicketId, setSelectedTicketId] = React.useState(null);
  const [showCreateModal, setShowCreateModal] = React.useState(false);

  React.useEffect(() => {
    if (!loading && !user) {
      login();
    }
  }, [loading, user, login]);

  const handleSetView = (v) => {
    setCurrentView(v);
    setCurrentFilter('all');
  };

  return (
    <div className="layout">
      <Sidebar
        user={user}
        currentView={currentView}
        onSetView={handleSetView}
      />
      <MainContent
        user={user}
        currentView={currentView}
        currentFilter={currentFilter}
        onSetFilter={setCurrentFilter}
        onOpenTicket={setSelectedTicketId}
        onOpenCreate={() => setShowCreateModal(true)}
      />
      <TicketDetail
        ticketId={selectedTicketId}
        user={user}
        onClose={() => setSelectedTicketId(null)}
      />
      {showCreateModal && (
        <CreateTicketModal
          user={user}
          onClose={() => setShowCreateModal(false)}
        />
      )}
    </div>
  );
}

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