import React, { useState } from 'react';
import { LoadStatus, STATUS_COLUMNS, statusColors } from '@/lib/fleetData';
import { MapPin, GripVertical } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';

const columnAccent: Record<LoadStatus, string> = {
  Available: 'border-t-slate-400', Assigned: 'border-t-[#0B3D91]',
  'In Transit': 'border-t-[#FF9800]', Delivered: 'border-t-[#00C853]', Invoiced: 'border-t-violet-500',
};

const DispatchBoard: React.FC = () => {
  const { loads, updateLoadStatus } = useFleetData();
  const [dragId, setDragId] = useState<string | null>(null);
  const [overCol, setOverCol] = useState<LoadStatus | null>(null);

  const drop = (status: LoadStatus) => {
    if (dragId) updateLoadStatus(dragId, status);
    setDragId(null); setOverCol(null);
  };

  return (
    <div className="flex gap-4 overflow-x-auto pb-4">
      {STATUS_COLUMNS.map((status) => {
        const colLoads = loads.filter((l) => l.status === status);
        return (
          <div key={status} onDragOver={(e) => { e.preventDefault(); setOverCol(status); }} onDrop={() => drop(status)}
            className={`flex-shrink-0 w-72 bg-slate-100 rounded-xl border-t-4 ${columnAccent[status]} ${overCol === status ? 'ring-2 ring-[#0B3D91]' : ''}`}>
            <div className="flex items-center justify-between px-4 py-3">
              <h3 className="font-semibold text-sm text-slate-700">{status}</h3>
              <span className="text-xs font-medium bg-white text-slate-500 px-2 py-0.5 rounded-full">{colLoads.length}</span>
            </div>
            <div className="px-2.5 pb-3 space-y-2.5 min-h-[120px]">
              {colLoads.map((l) => (
                <div key={l.id} draggable onDragStart={() => setDragId(l.id)}
                  className="bg-white rounded-lg border border-slate-200 p-3 shadow-sm cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between">
                    <span className="font-mono text-xs font-bold text-[#0B3D91]">{l.loadNumber}</span>
                    <GripVertical className="w-4 h-4 text-slate-300" />
                  </div>
                  <div className="mt-2 space-y-1 text-xs text-slate-600">
                    <p className="flex items-center gap-1"><MapPin className="w-3 h-3 text-[#00C853]" /> {l.pickup}</p>
                    <p className="flex items-center gap-1"><MapPin className="w-3 h-3 text-[#D32F2F]" /> {l.delivery}</p>
                  </div>
                  <div className="mt-2 flex items-center justify-between">
                    <span className="text-sm font-bold text-slate-900">${l.rate.toLocaleString()}</span>
                    <span className="text-[11px] text-slate-400">{l.miles} mi · ${(l.rate / l.miles).toFixed(2)}/mi</span>
                  </div>
                  {l.driver && <p className="mt-2 text-[11px] text-slate-500 border-t border-slate-100 pt-1.5">{l.driver} · {l.truck}</p>}
                  <span className={`mt-2 inline-block text-[10px] font-medium px-2 py-0.5 rounded border ${statusColors[l.status]}`}>{l.status}</span>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};
export default DispatchBoard;