import React from 'react';
import { Truck as TruckType } from '@/lib/fleetData';
import { Truck, Wrench, Shield, Fuel, Gauge, ClipboardCheck, Container } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';

const statusStyle: Record<string, string> = {
  Active: 'bg-emerald-100 text-emerald-700', 'In Shop': 'bg-red-100 text-red-700', Idle: 'bg-slate-100 text-slate-600',
};

const FleetView: React.FC = () => {
  const { trucks, trailers } = useFleetData();
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {trucks.map((t: TruckType) => (
          <div key={t.id} className="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <div className="w-11 h-11 rounded-lg bg-[#5A6673] text-white flex items-center justify-center"><Truck className="w-5 h-5" /></div>
                <div><h3 className="font-semibold text-slate-900">{t.unit}</h3><p className="text-xs text-slate-500">{t.year} {t.make} {t.model}</p></div>
              </div>
              <span className={`text-[11px] font-medium px-2 py-0.5 rounded-full ${statusStyle[t.status]}`}>{t.status}</span>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-3 text-xs">
              <div className="flex items-center gap-2 text-slate-600"><Gauge className="w-4 h-4 text-slate-400" />{t.mileage.toLocaleString()} mi</div>
              <div className="flex items-center gap-2 text-slate-600"><Fuel className="w-4 h-4 text-slate-400" />{t.mpg} MPG</div>
              <div className="flex items-center gap-2 text-slate-600"><Shield className="w-4 h-4 text-slate-400" />Ins: {t.insuranceExp}</div>
              <div className="flex items-center gap-2 text-slate-600"><ClipboardCheck className="w-4 h-4 text-slate-400" />DOT OK</div>
            </div>
            <div className={`mt-4 flex items-center gap-2 text-xs font-medium rounded-lg px-3 py-2 ${t.nextService === 'Due now' ? 'bg-red-50 text-[#D32F2F]' : 'bg-slate-50 text-slate-600'}`}>
              <Wrench className="w-4 h-4" />Next service: {t.nextService}
            </div>
            <div className="mt-3 flex items-center justify-between text-xs border-t border-slate-100 pt-3">
              <span className="text-slate-400 font-mono">{t.vin}</span><span className="text-slate-600">{t.driver || 'Unassigned'}</span>
            </div>
          </div>
        ))}
      </div>

      {trailers.length > 0 && (
        <div className="bg-white rounded-xl border border-slate-200">
          <div className="px-5 py-4 border-b border-slate-100"><h2 className="font-semibold text-slate-900">Trailers</h2></div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead><tr className="bg-slate-50 text-left text-xs uppercase text-slate-500">
                <th className="px-5 py-3 font-semibold">Trailer</th><th className="px-5 py-3 font-semibold">Type</th>
                <th className="px-5 py-3 font-semibold">Length</th><th className="px-5 py-3 font-semibold">Status</th>
                <th className="px-5 py-3 font-semibold hidden sm:table-cell">Last Inspection</th><th className="px-5 py-3 font-semibold">Assigned</th>
              </tr></thead>
              <tbody className="divide-y divide-slate-100">
                {trailers.map((tr) => (
                  <tr key={tr.id} className="hover:bg-slate-50">
                    <td className="px-5 py-3 font-medium text-slate-800 flex items-center gap-2"><Container className="w-4 h-4 text-slate-400" />{tr.trailerNumber}</td>
                    <td className="px-5 py-3 text-slate-600">{tr.type}</td>
                    <td className="px-5 py-3 text-slate-600">{tr.length}</td>
                    <td className="px-5 py-3"><span className={`text-[11px] font-medium px-2 py-0.5 rounded-full ${statusStyle[tr.status]}`}>{tr.status}</span></td>
                    <td className="px-5 py-3 text-slate-600 hidden sm:table-cell">{tr.lastInspection}</td>
                    <td className="px-5 py-3 text-slate-600">{tr.assigned || 'Unassigned'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
};
export default FleetView;