import { useMemo } from 'react';
import { Truck, Route, Activity, Zap } from 'lucide-react';
import { Shell, type ModuleConfig } from './components/Shell';
import AssetsModule from './modules/assets/AssetsModule';
import MileageModule from './modules/mileage/MileageModule';
import SchedulingModule from './modules/scheduling/SchedulingModule';
import EnergyModule from './modules/energy/EnergyModule';
import AuthProvider from './auth/AuthProvider';
import { useAuth } from './auth/useAuth';
import UnauthorizedPage from './auth/UnauthorizedPage';
import { canAccessScheduling } from './shared/auth/roles';

const BASE_MODULES: ModuleConfig[] = [
  { id: 'assets',  label: '资产管理', icon: Truck, component: AssetsModule },
  { id: 'mileage', label: '里程管理', icon: Route, component: MileageModule },
  { id: 'energy',  label: '能源管理', icon: Zap,   component: EnergyModule },
];

const SCHEDULING_MODULE: ModuleConfig = {
  id: 'scheduling', label: '智能调度', icon: Activity, component: SchedulingModule,
};

function AuthGate() {
  const { isLoading, isAuthenticated, error, user } = useAuth();

  const modules = useMemo(() => {
    if (canAccessScheduling(user?.roles)) {
      return [...BASE_MODULES, SCHEDULING_MODULE];
    }
    return BASE_MODULES;
  }, [user?.roles]);

  if (isLoading) {
    return (
      <div className="min-h-screen bg-[#F8F9FB] flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-3"></div>
          <p className="text-xs text-slate-400 font-bold">正在验证身份...</p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return <UnauthorizedPage message={error || undefined} />;
  }

  return <Shell modules={modules} />;
}

export default function App() {
  return (
    <AuthProvider>
      <AuthGate />
    </AuthProvider>
  );
}