import React, { useState, useEffect } from 'react';
import { fmt } from '@/lib/fleetData';
import { Building2, Mail, Phone, FileText, Save, X } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';
import { toast } from '@/components/ui/use-toast';

const creditColor: Record<string, string> = {
  'A+': 'bg-emerald-100 text-emerald-700', A: 'bg-emerald-100 text-emerald-700',
  'B+': 'bg-amber-100 text-amber-700', B: 'bg-amber-100 text-amber-700',
};

const BrokersView: React.FC = () => {
  const { brokers, updateBroker } = useFleetData();
  const [selected, setSelected] = useState<string | null>(null);
  const [noteDraft, setNoteDraft] = useState('');
  const [saving, setSaving] = useState(false);
  const active = brokers.find((b) => b.id === selected);

  useEffect(() => {
    setNoteDraft(active?.notes || '');
  }, [active?.id, active?.notes]);

  const saveNote = async () => {
    if (!active) return;
    setSaving(true);
    await updateBroker(active.id, { notes: noteDraft });
    setSaving(false);
    toast({ title: 'Notes saved', description: `Updated notes for ${active.name}.` });
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
        {brokers.map((b) => (
          <button key={b.id} onClick={() => setSelected(b.id)}
            className={`text-left bg-white rounded-xl border p-5 hover:shadow-md transition-all ${selected === b.id ? 'border-[#0B3D91] ring-1 ring-[#0B3D91]' : 'border-slate-200'}`}>
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-[#0B3D91] text-white flex items-center justify-center"><Building2 className="w-5 h-5" /></div>
                <div><h3 className="font-semibold text-slate-900">{b.name}</h3><p className="text-xs text-slate-500">{b.contact}</p></div>
              </div>
              <span className={`text-[11px] font-bold px-2 py-0.5 rounded ${creditColor[b.credit]}`}>{b.credit}</span>
            </div>
            <div className="mt-4 flex items-center justify-between text-xs text-slate-500">
              <span>{b.loadsYTD} loads YTD</span><span className="font-semibold text-slate-900">{fmt(b.revenueYTD)}</span><span>{b.avgDaysToPay}d pay</span>
            </div>
          </button>
        ))}
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-5 h-fit">
        {!active ? (
          <div className="flex flex-col items-center justify-center h-48 text-center text-slate-400">
            <Building2 className="w-9 h-9 mb-2" /><p className="text-sm">Select a broker to view details & notes.</p>
          </div>
        ) : (
          <div>
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-slate-900">{active.name}</h3>
              <button onClick={() => setSelected(null)} className="text-slate-400 hover:text-slate-600"><X className="w-4 h-4" /></button>
            </div>
            <div className="mt-4 space-y-2 text-sm text-slate-600">
              <p className="flex items-center gap-2"><Mail className="w-4 h-4 text-slate-400" /> {active.contact}</p>
              <p className="flex items-center gap-2"><Phone className="w-4 h-4 text-slate-400" /> {active.phone || 'No phone on file'}</p>
              <p className="flex items-center gap-2"><FileText className="w-4 h-4 text-slate-400" /> Credit: <span className="font-medium">{active.credit}</span> · {active.avgDaysToPay}d avg pay</p>
            </div>
            <div className="mt-4 border-t border-slate-100 pt-4">
              <p className="text-xs font-semibold text-slate-700 mb-2">Notes</p>
              <textarea
                value={noteDraft}
                onChange={(e) => setNoteDraft(e.target.value)}
                rows={5}
                placeholder="Add notes about this broker — rate agreements, payment behavior, preferred lanes..."
                className="w-full text-sm rounded-lg border border-slate-300 p-2.5 focus:outline-none focus:ring-1 focus:ring-[#0B3D91] focus:border-[#0B3D91] resize-none"
              />
              <button
                onClick={saveNote}
                disabled={saving || noteDraft === (active.notes || '')}
                className="mt-3 w-full flex items-center justify-center gap-1.5 text-sm font-medium text-white bg-[#0B3D91] rounded-lg py-2 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
              >
                <Save className="w-4 h-4" /> {saving ? 'Saving…' : 'Save Notes'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
export default BrokersView;