/* @component-map
 * App — Main container, handles sidebar navigation, theme toggle, view switching
 * Dashboard — Dashboard tab with KPIs, alerts, chart, top taxis
 * Deposits — Deposit list with filters, search, and CRUD via modal
 * Taxis — Taxi management grid with add/edit/delete
 * AIReports — AI-powered analysis cards and result panel
 * History — Historical data table with filters and CSV/PDF export
 * DepositModal — Modal form for creating/editing deposits
 * TaxiModal — Modal form for creating/editing taxis
 * Toast — Toast notification component
 * @end-component-map */

import { useIdentity } from '@deplixo/sdk';
import { Dashboard } from './components/Dashboard.jsx';
import { Deposits } from './components/Deposits.jsx';
import { Taxis } from './components/Taxis.jsx';
import { AIReports } from './components/AIReports.jsx';
import { History } from './components/History.jsx';
import { useCallback, useState } from 'react';
import { Toast } from './components/Toast.jsx';

const TABS = [
  { id: 'dashboard', icon: '📊', label: 'Tableau de bord' },
  { id: 'deposits', icon: '💰', label: 'Dépôts' },
  { id: 'taxis', icon: '🚖', label: 'Taxis' },
  { id: 'reports', icon: '🤖', label: 'Rapports IA' },
  { id: 'history', icon: '📋', label: 'Historique' },
];

function App() {
  const [tab, setTab] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [dark, setDark] = useState(false);
  const [toast, setToast] = useState(null);
  const [depositModal, setDepositModal] = useState(null);
  const { user } = useIdentity();

  const notify = useCallback((msg, type = 'success') => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 3000);
  }, []);

  const switchTab = (t) => { setTab(t); setSidebarOpen(false); };
  const toggleTheme = () => { setDark(d => !d); document.body.classList.toggle('dark'); };
  const currentLabel = TABS.find(t => t.id === tab)?.label || '';

  return (
    <div className={`app-root ${dark ? 'dark' : ''}`}>
      <aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
        <div className="sidebar-header">
          <div className="logo-wrap">
            <span className="logo-icon">🚕</span>
            <div><div className="logo-title">TaxiFlow</div><div className="logo-sub">Gestion des Dépôts</div></div>
          </div>
          <button className="sidebar-close" onClick={() => setSidebarOpen(false)}>✕</button>
        </div>
        <nav className="sidebar-nav">
          {TABS.map(t => (
            <button key={t.id} className={`nav-item ${tab === t.id ? 'active' : ''}`} onClick={() => switchTab(t.id)}>
              <span className="nav-icon">{t.icon}</span><span>{t.label}</span>
            </button>
          ))}
        </nav>
        <div className="sidebar-footer">
          <div className="user-chip"><span className="user-avatar">👤</span><span>{user?.name || 'Visiteur'}</span></div>
        </div>
      </aside>
      {sidebarOpen && <div className="overlay" onClick={() => setSidebarOpen(false)} />}
      <main className="main">
        <header className="topbar">
          <button className="menu-btn" onClick={() => setSidebarOpen(true)}>☰</button>
          <div className="topbar-title">{currentLabel}</div>
          <div className="topbar-actions">
            <button className="theme-toggle" onClick={toggleTheme} title="Mode sombre/clair">{dark ? '☀️' : '🌙'}</button>
            <button className="btn-primary btn-sm" onClick={() => setDepositModal({})}>+ Dépôt</button>
          </div>
        </header>
        {tab === 'dashboard' && <Dashboard notify={notify} onNewDeposit={() => setDepositModal({})} />}
        {tab === 'deposits' && <Deposits notify={notify} depositModal={depositModal} setDepositModal={setDepositModal} />}
        {tab === 'taxis' && <Taxis notify={notify} />}
        {tab === 'reports' && <AIReports notify={notify} />}
        {tab === 'history' && <History notify={notify} />}
      </main>
      {toast && <Toast message={toast.msg} type={toast.type} />}
    </div>
  );
}

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