import React from 'react';
import { Driver } from '@/lib/fleetData';
import { Phone, Mail, MapPin, Shield, Clock, IdCard, CalendarClock } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';

const statusStyle: Record<Driver['status'], string> = {
  Available: 'bg-emerald-100 text-emerald-700', 'On Duty': 'bg-amber-100 text-amber-700',
  'Off Duty': 'bg-slate-100 text-slate-600', Resting: 'bg-blue-100 text-blue-700',
};

const DriversView: React.FC = () => {
  const { drivers } = useFleetData();
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
      {drivers.map((d) => (
        <div key={d.id} className="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
          <div className="flex items-start gap-3">
            <div className="w-12 h-12 rounded-full bg-[#0B3D91] text-white flex items-center justify-center font-bold">{d.name.split(' ').map((n) => n[0]).join('')}</div>
            <div className="flex-1">
              <h3 className="font-semibold text-slate-900">{d.name}</h3>
              <span className={`text-[11px] font-medium px-2 py-0.5 rounded-full ${statusStyle[d.status]}`}>{d.status}</span>
            </div>
            <div className="text-right">
              <div className="flex items-center gap-1 text-[#00C853] text-sm font-bold"><Shield className="w-4 h-4" /> {d.safetyScore}</div>
              <p className="text-[10px] text-slate-400">Safety</p>
            </div>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-2 text-xs text-slate-600">
            <p className="flex items-center gap-1.5"><MapPin className="w-3.5 h-3.5 text-slate-400" /> {d.location}</p>
            <p className="flex items-center gap-1.5"><Clock className="w-3.5 h-3.5 text-slate-400" /> {d.hoursAvailable}h HOS</p>
            <p className="flex items-center gap-1.5"><IdCard className="w-3.5 h-3.5 text-slate-400" /> {d.cdl}</p>
            <p className="flex items-center gap-1.5"><CalendarClock className="w-3.5 h-3.5 text-slate-400" /> Med: {d.medicalCardExp}</p>
          </div>
          <div className="mt-4 flex items-center justify-between border-t border-slate-100 pt-3 text-xs">
            <div><p className="font-bold text-slate-900">{d.milesThisWeek.toLocaleString()} mi</p><p className="text-[10px] text-slate-400">this week</p></div>
            <div><p className="font-bold text-[#00C853]">${d.revenueThisWeek.toLocaleString()}</p><p className="text-[10px] text-slate-400">revenue</p></div>
            <div className="flex gap-2">
              <a href={`tel:${d.phone}`} className="p-2 rounded-lg bg-slate-100 hover:bg-[#0B3D91] hover:text-white text-slate-600 transition-colors"><Phone className="w-4 h-4" /></a>
              <a href={`mailto:${d.email}`} className="p-2 rounded-lg bg-slate-100 hover:bg-[#0B3D91] hover:text-white text-slate-600 transition-colors"><Mail className="w-4 h-4" /></a>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
export default DriversView;