import React, { useState, useMemo } from 'react';
import { LoadStatus, STATUS_COLUMNS, statusColors } from '@/lib/fleetData';
import { Search, Trash2, Filter } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';
import { useAuth } from '@/contexts/AuthContext';

const LoadsView: React.FC = () => {
  const { loads, deleteLoad, loading } = useFleetData();
  const { role } = useAuth();
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<LoadStatus | 'All'>('All');
  const [sort, setSort] = useState<'rate' | 'permile' | 'miles'>('rate');

  const filtered = useMemo(() => {
    let res = loads.filter((l) =>
      (filter === 'All' || l.status === filter) &&
      (l.loadNumber.toLowerCase().includes(query.toLowerCase()) ||
        l.pickup.toLowerCase().includes(query.toLowerCase()) ||
        l.delivery.toLowerCase().includes(query.toLowerCase()) ||
        l.broker.toLowerCase().includes(query.toLowerCase())));
    res = [...res].sort((a, b) => {
      if (sort === 'rate') return b.rate - a.rate;
      if (sort === 'miles') return b.miles - a.miles;
      return b.rate / b.miles - a.rate / a.miles;
    });
    return res;
  }, [loads, query, filter, sort]);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        <div className="relative flex-1 min-w-[220px]">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search load #, city, broker..."
            className="w-full pl-9 pr-3 py-2.5 text-sm rounded-lg border border-slate-200 focus:border-[#0B3D91] outline-none bg-white" />
        </div>
        <select value={sort} onChange={(e) => setSort(e.target.value as 'rate' | 'permile' | 'miles')}
          className="text-sm rounded-lg border border-slate-200 px-3 py-2.5 bg-white outline-none focus:border-[#0B3D91]">
          <option value="rate">Sort: Rate</option>
          <option value="permile">Sort: $/mile</option>
          <option value="miles">Sort: Miles</option>
        </select>
      </div>

      <div className="flex flex-wrap gap-2">
        {(['All', ...STATUS_COLUMNS] as const).map((s) => (
          <button key={s} onClick={() => setFilter(s)}
            className={`flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-full border transition-colors ${filter === s ? 'bg-[#0B3D91] text-white border-[#0B3D91]' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'}`}>
            {s === 'All' && <Filter className="w-3 h-3" />}{s}
          </button>
        ))}
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <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 tracking-wide">
                <th className="px-4 py-3 font-semibold">Load #</th>
                <th className="px-4 py-3 font-semibold">Route</th>
                <th className="px-4 py-3 font-semibold hidden md:table-cell">Broker</th>
                <th className="px-4 py-3 font-semibold hidden lg:table-cell">Commodity</th>
                <th className="px-4 py-3 font-semibold text-right">Rate</th>
                <th className="px-4 py-3 font-semibold text-right hidden sm:table-cell">$/mi</th>
                <th className="px-4 py-3 font-semibold">Status</th>
                <th className="px-4 py-3 font-semibold hidden xl:table-cell">Driver</th>
                <th className="px-4 py-3"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filtered.map((l) => (
                <tr key={l.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3 font-mono text-xs font-bold text-[#0B3D91]">{l.loadNumber}</td>
                  <td className="px-4 py-3 text-slate-700 whitespace-nowrap">{l.pickup} <span className="text-slate-400">→</span> {l.delivery}</td>
                  <td className="px-4 py-3 text-slate-500 hidden md:table-cell">{l.broker}</td>
                  <td className="px-4 py-3 text-slate-500 hidden lg:table-cell">{l.commodity}</td>
                  <td className="px-4 py-3 text-right font-semibold text-slate-900">${l.rate.toLocaleString()}</td>
                  <td className="px-4 py-3 text-right text-slate-500 hidden sm:table-cell">${(l.rate / l.miles).toFixed(2)}</td>
                  <td className="px-4 py-3"><span className={`text-[10px] font-medium px-2 py-0.5 rounded border ${statusColors[l.status]}`}>{l.status}</span></td>
                  <td className="px-4 py-3 text-slate-500 hidden xl:table-cell">{l.driver || '—'}</td>
                  <td className="px-4 py-3 text-right">
                    {role && (
                      <button onClick={() => deleteLoad(l.id)} className="text-slate-400 hover:text-[#D32F2F]" title="Delete load">
                        <Trash2 className="w-4 h-4" />
                      </button>
                    )}
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={9} className="px-4 py-10 text-center text-slate-400">{loading ? 'Loading loads…' : 'No loads match your filters.'}</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};
export default LoadsView;