import React, { useState } from 'react';
import { HomePage } from './pages/HomePage';
import { DetailPage } from './pages/DetailPage';
import { TrendChart, CategoryDistributionChart, StatusChart, CNQChart } from './components/Charts';
import './App.css';

type TabType = 'home' | 'security' | 'quality' | 'delays' | 'costs' | 'maintenance' | 'charts';

function App() {
  const [activeTab, setActiveTab] = useState<TabType>('home');

  return (
    <div className="app">
      <header className="app-header">
        <div className="header-content">
          <div className="header-title">
            <h1>📊 Dashboard SQDC</h1>
            <p>Indicateurs de Performance - Sécurité, Qualité, Délais, Coûts</p>
          </div>
          <div className="header-date">
            {new Date().toLocaleDateString('fr-FR', {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric'
            })}
          </div>
        </div>
      </header>

      <nav className="app-nav">
        <button
          className={`nav-btn ${activeTab === 'home' ? 'active' : ''}`}
          onClick={() => setActiveTab('home')}
        >
          🏠 Accueil
        </button>
        <button
          className={`nav-btn ${activeTab === 'security' ? 'active' : ''}`}
          onClick={() => setActiveTab('security')}
        >
          🛡️ Sécurité
        </button>
        <button
          className={`nav-btn ${activeTab === 'quality' ? 'active' : ''}`}
          onClick={() => setActiveTab('quality')}
        >
          🎯 Qualité
        </button>
        <button
          className={`nav-btn ${activeTab === 'delays' ? 'active' : ''}`}
          onClick={() => setActiveTab('delays')}
        >
          ⏱️ Délais
        </button>
        <button
          className={`nav-btn ${activeTab === 'costs' ? 'active' : ''}`}
          onClick={() => setActiveTab('costs')}
        >
          💰 Coûts
        </button>
        <button
          className={`nav-btn ${activeTab === 'maintenance' ? 'active' : ''}`}
          onClick={() => setActiveTab('maintenance')}
        >
          🔧 Maintenance
        </button>
        <button
          className={`nav-btn ${activeTab === 'charts' ? 'active' : ''}`}
          onClick={() => setActiveTab('charts')}
        >
          📈 Analyses
        </button>
      </nav>

      <main className="app-content">
        {activeTab === 'home' && (
          <HomePage />
        )}
        
        {activeTab === 'security' && (
          <DetailPage category="security" />
        )}
        
        {activeTab === 'quality' && (
          <DetailPage category="quality" />
        )}
        
        {activeTab === 'delays' && (
          <DetailPage category="delays" />
        )}
        
        {activeTab === 'costs' && (
          <DetailPage category="costs" />
        )}
        
        {activeTab === 'maintenance' && (
          <DetailPage category="maintenance" />
        )}
        
        {activeTab === 'charts' && (
          <div className="charts-page">
            <div className="charts-header">
              <h1>📈 Analyses et Tendances</h1>
              <p>Vue globale des tendances et des analyses comparatives</p>
            </div>
            <div className="charts-grid">
              <TrendChart />
              <CategoryDistributionChart />
              <StatusChart />
              <CNQChart />
            </div>
          </div>
        )}
      </main>

      <footer className="app-footer">
        <p>Dashboard SQDC | Dernière mise à jour: {new Date().toLocaleTimeString('fr-FR')} | Données en temps réel</p>
      </footer>
    </div>
  );
}

export default App;
