import React, { useState } from 'react';
import { X, Package } from 'lucide-react';
import { useFleetData } from '@/contexts/FleetDataContext';

interface Props { open: boolean; close: () => void; }

const today = () => new Date().toISOString().slice(0, 10);
const tomorrow = () => new Date(Date.now() + 86400000).toISOString().slice(0, 10);

const emptyForm = () => ({
  broker: '', pickup: '', delivery: '', rate: '', miles: '', commodity: '', weight: '',
  pickupDate: today(), deliveryDate: tomorrow(),
});

const NewLoadModal: React.FC<Props> = ({ open, close }) => {
  const { addLoad } = useFleetData();
  const [form, setForm] = useState(emptyForm());
  if (!open) return null;

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const num = Math.floor(10253 + Math.random() * 900);
    await addLoad({
      loadNumber: 'FL-' + num,
      broker: form.broker || 'New Broker',
      pickup: form.pickup || 'TBD',
      delivery: form.delivery || 'TBD',
      pickupDate: form.pickupDate || today(),
      deliveryDate: form.deliveryDate || tomorrow(),
      weight: Number(form.weight) || 40000,
      commodity: form.commodity || 'General',
      rate: Number(form.rate) || 1000,
      miles: Number(form.miles) || 300,
      deadhead: 15, status: 'Available', driver: null, truck: null,
    });
    setForm(emptyForm());
    close();
  };

  const field = (key: keyof ReturnType<typeof emptyForm>, label: string, type = 'text') => (
    <div>
      <label className="text-xs font-medium text-slate-600">{label}</label>
      <input type={type} value={form[key]} onChange={(e) => setForm({ ...form, [key]: e.target.value })}
        className="w-full mt-1 text-sm rounded-lg border border-slate-200 px-3 py-2.5 outline-none focus:border-[#0B3D91]" />
    </div>
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={close}>
      <div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 sticky top-0 bg-white">
          <div className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-lg bg-[#0B3D91] flex items-center justify-center"><Package className="w-5 h-5 text-white" /></div>
            <h2 className="font-semibold text-slate-900">Create New Load</h2>
          </div>
          <button onClick={close} className="text-slate-400 hover:text-slate-600"><X className="w-5 h-5" /></button>
        </div>
        <form onSubmit={submit} className="p-6 space-y-4">
          {field('broker', 'Broker')}
          <div className="grid grid-cols-2 gap-4">{field('pickup', 'Pickup Location')}{field('delivery', 'Delivery Location')}</div>
          <div className="grid grid-cols-2 gap-4">{field('pickupDate', 'Pickup Date', 'date')}{field('deliveryDate', 'Delivery Date', 'date')}</div>
          <div className="grid grid-cols-2 gap-4">{field('rate', 'Rate ($)', 'number')}{field('miles', 'Miles', 'number')}</div>
          <div className="grid grid-cols-2 gap-4">{field('commodity', 'Commodity')}{field('weight', 'Weight (lbs)', 'number')}</div>
          <div className="flex gap-3 pt-2">
            <button type="button" onClick={close} className="flex-1 py-2.5 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel</button>
            <button type="submit" className="flex-1 py-2.5 rounded-lg bg-[#0B3D91] hover:bg-[#0a3580] text-white text-sm font-semibold">Create Load</button>
          </div>
        </form>
      </div>
    </div>
  );
};
export default NewLoadModal;