/* @component-map
 * App — Main container, handles tab navigation between Map, Routes, Favorites, Performance
 * MapView — Interactive map display for transit routes
 * RoutesManager — CRUD management for transit routes and stops
 * FavoritesList — Display and manage favorite stops/routes
 * PerformanceChart — Individual route performance card with on-time/delayed metrics
 * RoutePerformanceCharts — Grid of performance charts with time range selector
 * @end-component-map */

import { useCollection } from '@deplixo/sdk';
import { MapView } from './components/MapView.jsx';
import { RoutesManager } from './components/RoutesManager.jsx';
import { FavoritesList } from './components/FavoritesList.jsx';
import { useState } from 'react';
import { RoutePerformanceCharts } from './components/RoutePerformance.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('map');
  const { items: routes } = useCollection('routes', { personal: true });

  const tabs = [
    { id: 'map', label: 'Map', icon: '🗺️' },
    { id: 'routes', label: 'Routes', icon: '🚌' },
    { id: 'favorites', label: 'Favorites', icon: '⭐' },
    { id: 'performance', label: 'Performance', icon: '📈' },
  ];

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <h1 className="app-title">
            <span className="title-icon">🚇</span>
            TransitPulse
          </h1>
          <p className="app-subtitle">Your routes, always at hand</p>
        </div>
      </header>
      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>
      <main className="main-content">
        {activeTab === 'map' && <MapView />}
        {activeTab === 'routes' && <RoutesManager />}
        {activeTab === 'favorites' && <FavoritesList />}
        {activeTab === 'performance' && <RoutePerformanceCharts routes={routes || []} />}
      </main>
    </div>
  );
}

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