import { useSearchParams } from 'react-router-dom';
import { Car, Truck } from 'lucide-react';
import { DriverList } from '@/pages/DriverList';
import { VehicleList } from '@/pages/VehicleList';

type FleetTab = 'drivers' | 'vehicles';

const TABS: { id: FleetTab; label: string; icon: typeof Car }[] = [
  { id: 'drivers', label: 'Drivers', icon: Car },
  { id: 'vehicles', label: 'Vehicles', icon: Truck },
];

export function FleetPage() {
  const [searchParams, setSearchParams] = useSearchParams();

  const rawTab = searchParams.get('tab');
  const activeTab: FleetTab = rawTab === 'vehicles' ? 'vehicles' : 'drivers';

  const handleTabChange = (tab: FleetTab) => {
    setSearchParams({ tab }, { replace: true });
  };

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl sm:text-3xl font-bold text-foreground">Fleet Management</h1>
      </div>

      {/* Tab Bar */}
      <div className="border-b border-border mb-6">
        <div className="flex gap-1 -mb-px">
          {TABS.map((tab) => (
            <button
              key={tab.id}
              onClick={() => handleTabChange(tab.id)}
              className={`px-4 py-3 text-sm font-medium transition-colors flex items-center gap-2 border-b-2 ${
                activeTab === tab.id
                  ? 'border-primary text-primary'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              }`}
            >
              <tab.icon className="h-4 w-4" />
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Tab Content */}
      {activeTab === 'drivers' && <DriverList embedded />}
      {activeTab === 'vehicles' && <VehicleList embedded />}
    </div>
  );
}
