import { useState } from 'react';

interface Driver {
  id: string;
  name: string;
  phone: string;
  currentLocation: { lat: number; lng: number };
  assignedVipIds: string[];
  vehicleCapacity?: number;
}

interface EditDriverFormProps {
  driver: Driver;
  onSubmit: (driverData: any) => void;
  onCancel: () => void;
}

const EditDriverForm: React.FC<EditDriverFormProps> = ({ driver, onSubmit, onCancel }) => {
  const [formData, setFormData] = useState({
    name: driver.name,
    phone: driver.phone,
    vehicleCapacity: driver.vehicleCapacity || 4,
    currentLocation: {
      lat: driver.currentLocation.lat,
      lng: driver.currentLocation.lng
    }
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({
      ...formData,
      id: driver.id
    });
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    
    if (name === 'lat' || name === 'lng') {
      setFormData(prev => ({
        ...prev,
        currentLocation: {
          ...prev.currentLocation,
          [name]: parseFloat(value) || 0
        }
      }));
    } else if (name === 'vehicleCapacity') {
      setFormData(prev => ({ ...prev, [name]: parseInt(value) || 0 }));
    } else {
      setFormData(prev => ({ ...prev, [name]: value }));
    }
  };

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {/* Modal Header */}
        <div className="modal-header">
          <h2 className="text-2xl font-bold text-slate-800">Edit Driver</h2>
          <p className="text-slate-600 mt-2">Update driver information for {driver.name}</p>
        </div>

        {/* Modal Body */}
        <div className="modal-body">
          <form onSubmit={handleSubmit} className="space-y-8">
            {/* Basic Information Section */}
            <div className="form-section">
              <div className="form-section-header">
                <h3 className="form-section-title">Basic Information</h3>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="form-group">
                  <label htmlFor="name" className="form-label">Driver Name *</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    className="form-input"
                    placeholder="Enter driver's full name"
                    required
                  />
                </div>

                <div className="form-group">
                  <label htmlFor="phone" className="form-label">Phone Number *</label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    className="form-input"
                    placeholder="Enter phone number"
                    required
                  />
                </div>
              </div>
              
              <div className="form-group">
                <label htmlFor="vehicleCapacity" className="form-label">Vehicle Capacity *</label>
                <select
                  id="vehicleCapacity"
                  name="vehicleCapacity"
                  value={formData.vehicleCapacity}
                  onChange={handleChange}
                  className="form-input"
                  required
                >
                  <option value={2}>2 passengers (Sedan/Coupe)</option>
                  <option value={4}>4 passengers (Standard Car)</option>
                  <option value={6}>6 passengers (SUV/Van)</option>
                  <option value={8}>8 passengers (Large Van)</option>
                  <option value={12}>12 passengers (Mini Bus)</option>
                </select>
                <p className="text-sm text-slate-600 mt-1">
                  🚗 Select the maximum number of passengers this vehicle can accommodate
                </p>
              </div>
            </div>

            {/* Location Section */}
            <div className="form-section">
              <div className="form-section-header">
                <h3 className="form-section-title">Current Location</h3>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="form-group">
                  <label htmlFor="lat" className="form-label">Latitude *</label>
                  <input
                    type="number"
                    id="lat"
                    name="lat"
                    value={formData.currentLocation.lat}
                    onChange={handleChange}
                    className="form-input"
                    placeholder="Enter latitude"
                    step="any"
                    required
                  />
                </div>

                <div className="form-group">
                  <label htmlFor="lng" className="form-label">Longitude *</label>
                  <input
                    type="number"
                    id="lng"
                    name="lng"
                    value={formData.currentLocation.lng}
                    onChange={handleChange}
                    className="form-input"
                    placeholder="Enter longitude"
                    step="any"
                    required
                  />
                </div>
              </div>
              
              <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <p className="text-sm text-blue-700">
                  <strong>Current coordinates:</strong> {formData.currentLocation.lat.toFixed(6)}, {formData.currentLocation.lng.toFixed(6)}
                </p>
                <p className="text-xs text-blue-600 mt-1">
                  You can use GPS coordinates or get them from a mapping service
                </p>
              </div>
            </div>

            <div className="form-actions">
              <button type="button" className="btn btn-secondary" onClick={onCancel}>
                Cancel
              </button>
              <button type="submit" className="btn btn-primary">
                Update Driver
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default EditDriverForm;