import { useState } from 'react';
import { Dashboard } from './components/Dashboard';
import { Sidebar, sidebarMenuItems } from './components/Sidebar';
import { Header } from './components/Header';
import { cn } from './lib/utils';

export default function App() {
  const [currentView, setCurrentView] = useState('overall');

  const viewTitles: Record<string, string> = {
    'overall': '全网精细化运营大盘',
    'efficiency': '各站点调度与效能监控',
    'users': '平台用户与资产池'
  };

  return (
    <div className="flex h-screen bg-slate-50 overflow-hidden font-sans">
      <Sidebar currentView={currentView} setCurrentView={setCurrentView} />
      <div className="flex flex-col flex-1 overflow-hidden">
        <Header title={viewTitles[currentView] || '数据分析'} />
        <nav className="md:hidden bg-white border-b border-slate-200 px-2 shrink-0 overflow-x-auto">
          <div className="flex gap-1 min-w-max">
            {sidebarMenuItems.map((item) => {
              const active = currentView === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => setCurrentView(item.id)}
                  className={cn(
                    "flex items-center gap-1.5 px-3 py-2.5 text-xs font-semibold whitespace-nowrap border-b-2 transition-colors",
                    active
                      ? "text-indigo-600 border-indigo-500"
                      : "text-slate-500 border-transparent active:text-slate-700"
                  )}
                >
                  <item.icon className={cn("w-4 h-4", active ? "text-indigo-500" : "text-slate-400")} />
                  {item.name}
                </button>
              );
            })}
          </div>
        </nav>
        <main className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
          <Dashboard currentView={currentView} />
        </main>
      </div>
    </div>
  );
}