import { useState, useEffect } from 'react';
import { getTheme, setTheme } from '@/lib/store';
import { formatDateFr, getTodayStr } from '@/lib/types';
import SaisiePage from '@/pages/SaisiePage';
import CommandesPage from '@/pages/CommandesPage';
import LivraisonPage from '@/pages/LivraisonPage';
import ClientsPage from '@/pages/ClientsPage';
import StockDosagePage from '@/pages/StockDosagePage';
import AbonnementsPage from '@/pages/AbonnementsPage';

type Tab = 'saisie' | 'commandes' | 'livraison' | 'clients' | 'stock' | 'abonnements';

const tabs: { id: Tab; label: string; icon: string }[] = [
  { id: 'saisie', label: 'Saisie', icon: '✏️' },
  { id: 'commandes', label: 'Commandes', icon: '📋' },
  { id: 'livraison', label: 'Livraison', icon: '🚚' },
  { id: 'clients', label: 'Clients', icon: '👥' },
  { id: 'stock', label: 'Stock', icon: '📦' },
  { id: 'abonnements', label: 'Abos', icon: '🔄' },
];

export default function Index() {
  const [activeTab, setActiveTab] = useState<Tab>('saisie');
  const [theme, setThemeState] = useState(getTheme());
  const [refreshKey, setRefreshKey] = useState(0);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
    setThemeState(next);
  };

  const onOrderAdded = () => setRefreshKey(k => k + 1);

  return (
    <div className="min-h-screen bg-background">
      {/* Navigation Bar */}
      <header className="fixed top-0 left-0 right-0 z-[100] glass-nav px-4 py-3 flex items-center justify-between">
        <div className="font-heading text-[17px] font-extrabold tracking-tight">
          <span className="text-primary">Collagene</span>
          <span className="text-muted-foreground font-normal ml-1">Pro</span>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-[11px] text-muted-foreground bg-secondary px-2.5 py-1 rounded-full border border-border">
            {formatDateFr(getTodayStr())}
          </span>
          <button onClick={toggleTheme}
            className="text-sm bg-secondary border border-border rounded-full px-2.5 py-1 text-muted-foreground">
            {theme === 'dark' ? '🌙' : '☀️'}
          </button>
        </div>
      </header>

      {/* Page Content */}
      <main className="pt-[68px] pb-[90px]">
        {activeTab === 'saisie' && <SaisiePage onOrderAdded={onOrderAdded} />}
        {activeTab === 'commandes' && <CommandesPage refreshKey={refreshKey} />}
        {activeTab === 'livraison' && <LivraisonPage refreshKey={refreshKey} />}
        {activeTab === 'clients' && <ClientsPage />}
        {activeTab === 'stock' && <StockDosagePage />}
        {activeTab === 'abonnements' && <AbonnementsPage />}
      </main>

      {/* Tab Bar */}
      <nav className="fixed bottom-0 left-0 right-0 z-[100] glass-tab-bar flex" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
        {tabs.map(tab => (
          <button key={tab.id} onClick={() => setActiveTab(tab.id)}
            className={`flex-1 flex flex-col items-center py-2.5 gap-0.5 border-none bg-transparent transition-colors ${activeTab === tab.id ? 'text-primary' : 'text-muted-foreground'}`}>
            <span className="text-[18px]">{tab.icon}</span>
            <span className="text-[9px] font-medium">{tab.label}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}