/**
 * Multi-Step Booking Form
 *
 * Create a new booking in 4 steps:
 * 1. Select Rate Quote
 * 2. Shipper & Consignee Information
 * 3. Container Details
 * 4. Review & Confirmation
 */

'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useMutation, useQuery } from '@tanstack/react-query';
import { bookingsApi, ratesApi } from '@/lib/api';

type Step = 1 | 2 | 3 | 4;

interface Party {
  name: string;
  address: string;
  city: string;
  postalCode: string;
  country: string;
  contactName: string;
  contactEmail: string;
  contactPhone: string;
}

interface Container {
  type: string;
  quantity: number;
  weight?: number;
  temperature?: number;
  isHazmat: boolean;
  hazmatClass?: string;
  commodityDescription: string;
}

interface BookingFormData {
  rateQuoteId: string;
  shipper: Party;
  consignee: Party;
  containers: Container[];
  specialInstructions?: string;
}

const emptyParty: Party = {
  name: '',
  address: '',
  city: '',
  postalCode: '',
  country: '',
  contactName: '',
  contactEmail: '',
  contactPhone: '',
};

const emptyContainer: Container = {
  type: '40HC',
  quantity: 1,
  isHazmat: false,
  commodityDescription: '',
};

export default function NewBookingPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const preselectedQuoteId = searchParams.get('quoteId');

  const [currentStep, setCurrentStep] = useState<Step>(1);
  const [formData, setFormData] = useState<BookingFormData>({
    rateQuoteId: preselectedQuoteId || '',
    shipper: { ...emptyParty },
    consignee: { ...emptyParty },
    containers: [{ ...emptyContainer }],
    specialInstructions: '',
  });

  const [error, setError] = useState('');

  // Fetch preselected quote if provided
  const { data: preselectedQuote } = useQuery({
    queryKey: ['rate-quote', preselectedQuoteId],
    queryFn: () => ratesApi.getById(preselectedQuoteId!),
    enabled: !!preselectedQuoteId,
  });

  useEffect(() => {
    if (preselectedQuote) {
      setFormData(prev => ({ ...prev, rateQuoteId: preselectedQuote.id }));
    }
  }, [preselectedQuote]);

  // Create booking mutation
  const createBookingMutation = useMutation({
    mutationFn: (data: BookingFormData) => bookingsApi.create(data),
    onSuccess: booking => {
      router.push(`/dashboard/bookings/${booking.id}`);
    },
    onError: (err: any) => {
      setError(err.response?.data?.message || 'Failed to create booking');
    },
  });

  const handleNext = () => {
    setError('');
    if (currentStep < 4) {
      setCurrentStep(prev => (prev + 1) as Step);
    }
  };

  const handleBack = () => {
    setError('');
    if (currentStep > 1) {
      setCurrentStep(prev => (prev - 1) as Step);
    }
  };

  const handleSubmit = () => {
    setError('');
    createBookingMutation.mutate(formData);
  };

  const updateParty = (type: 'shipper' | 'consignee', field: keyof Party, value: string) => {
    setFormData(prev => ({
      ...prev,
      [type]: {
        ...prev[type],
        [field]: value,
      },
    }));
  };

  const updateContainer = (index: number, field: keyof Container, value: any) => {
    setFormData(prev => ({
      ...prev,
      containers: prev.containers.map((c, i) => (i === index ? { ...c, [field]: value } : c)),
    }));
  };

  const addContainer = () => {
    setFormData(prev => ({
      ...prev,
      containers: [...prev.containers, { ...emptyContainer }],
    }));
  };

  const removeContainer = (index: number) => {
    if (formData.containers.length > 1) {
      setFormData(prev => ({
        ...prev,
        containers: prev.containers.filter((_, i) => i !== index),
      }));
    }
  };

  const isStepValid = (step: Step): boolean => {
    switch (step) {
      case 1:
        return !!formData.rateQuoteId;
      case 2:
        return (
          formData.shipper.name.trim() !== '' &&
          formData.shipper.contactEmail.trim() !== '' &&
          formData.consignee.name.trim() !== '' &&
          formData.consignee.contactEmail.trim() !== ''
        );
      case 3:
        return formData.containers.every(
          c => c.commodityDescription.trim() !== '' && c.quantity > 0
        );
      case 4:
        return true;
      default:
        return false;
    }
  };

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Create New Booking</h1>
        <p className="text-sm text-gray-500 mt-1">Complete the booking process in 4 simple steps</p>
      </div>

      {/* Progress Steps */}
      <div className="bg-white rounded-lg shadow p-6">
        <nav aria-label="Progress">
          <ol className="flex items-center justify-between">
            {[
              { number: 1, name: 'Rate Quote' },
              { number: 2, name: 'Parties' },
              { number: 3, name: 'Containers' },
              { number: 4, name: 'Review' },
            ].map((step, idx) => (
              <li key={step.number} className={`flex items-center ${idx !== 3 ? 'flex-1' : ''}`}>
                <div className="flex flex-col items-center">
                  <div
                    className={`flex items-center justify-center w-10 h-10 rounded-full border-2 ${
                      currentStep === step.number
                        ? 'border-blue-600 bg-blue-600 text-white'
                        : currentStep > step.number
                          ? 'border-green-600 bg-green-600 text-white'
                          : 'border-gray-300 bg-white text-gray-500'
                    }`}
                  >
                    {currentStep > step.number ? (
                      <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          fillRule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      <span className="text-sm font-semibold">{step.number}</span>
                    )}
                  </div>
                  <span
                    className={`mt-2 text-xs font-medium ${
                      currentStep === step.number
                        ? 'text-blue-600'
                        : currentStep > step.number
                          ? 'text-green-600'
                          : 'text-gray-500'
                    }`}
                  >
                    {step.name}
                  </span>
                </div>
                {idx !== 3 && (
                  <div
                    className={`flex-1 h-0.5 mx-4 ${
                      currentStep > step.number ? 'bg-green-600' : 'bg-gray-300'
                    }`}
                  />
                )}
              </li>
            ))}
          </ol>
        </nav>
      </div>

      {/* Error Message */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-md p-4">
          <div className="text-sm text-red-800">{error}</div>
        </div>
      )}

      {/* Step Content */}
      <div className="bg-white rounded-lg shadow p-6">
        {/* Step 1: Rate Quote Selection */}
        {currentStep === 1 && (
          <div className="space-y-6">
            <div>
              <h2 className="text-lg font-semibold text-gray-900 mb-4">
                Step 1: Select Rate Quote
              </h2>
              {preselectedQuote ? (
                <div className="border border-green-200 bg-green-50 rounded-lg p-4">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center space-x-4">
                      <div className="flex-shrink-0">
                        {preselectedQuote.carrier.logoUrl ? (
                          <img
                            src={preselectedQuote.carrier.logoUrl}
                            alt={preselectedQuote.carrier.name}
                            className="h-12 w-12 object-contain"
                          />
                        ) : (
                          <div className="h-12 w-12 bg-blue-100 rounded flex items-center justify-center text-blue-600 font-semibold">
                            {preselectedQuote.carrier.name.substring(0, 2).toUpperCase()}
                          </div>
                        )}
                      </div>
                      <div>
                        <h3 className="text-lg font-semibold text-gray-900">
                          {preselectedQuote.carrier.name}
                        </h3>
                        <p className="text-sm text-gray-500">
                          {preselectedQuote.route.originPort} →{' '}
                          {preselectedQuote.route.destinationPort}
                        </p>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-2xl font-bold text-blue-600">
                        ${preselectedQuote.pricing.totalAmount.toLocaleString()}
                      </div>
                      <div className="text-sm text-gray-500">
                        {preselectedQuote.pricing.currency}
                      </div>
                    </div>
                  </div>
                  <div className="mt-4 grid grid-cols-3 gap-4 text-sm">
                    <div>
                      <span className="text-gray-500">ETD:</span>{' '}
                      <span className="font-medium">
                        {new Date(preselectedQuote.route.etd).toLocaleDateString()}
                      </span>
                    </div>
                    <div>
                      <span className="text-gray-500">Transit:</span>{' '}
                      <span className="font-medium">{preselectedQuote.route.transitDays} days</span>
                    </div>
                    <div>
                      <span className="text-gray-500">ETA:</span>{' '}
                      <span className="font-medium">
                        {new Date(preselectedQuote.route.eta).toLocaleDateString()}
                      </span>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="text-center py-8">
                  <svg
                    className="mx-auto h-12 w-12 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                    />
                  </svg>
                  <h3 className="mt-2 text-sm font-medium text-gray-900">No rate quote selected</h3>
                  <p className="mt-1 text-sm text-gray-500">
                    Please search for rates first and select a quote to book
                  </p>
                  <div className="mt-6">
                    <a
                      href="/dashboard/search"
                      className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
                    >
                      Search Rates
                    </a>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* Step 2: Shipper & Consignee */}
        {currentStep === 2 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">
              Step 2: Shipper & Consignee Information
            </h2>

            {/* Shipper */}
            <div>
              <h3 className="text-md font-medium text-gray-900 mb-4">Shipper Details</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Company Name *</label>
                  <input
                    type="text"
                    required
                    value={formData.shipper.name}
                    onChange={e => updateParty('shipper', 'name', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Address *</label>
                  <input
                    type="text"
                    required
                    value={formData.shipper.address}
                    onChange={e => updateParty('shipper', 'address', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">City *</label>
                  <input
                    type="text"
                    required
                    value={formData.shipper.city}
                    onChange={e => updateParty('shipper', 'city', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Postal Code *</label>
                  <input
                    type="text"
                    required
                    value={formData.shipper.postalCode}
                    onChange={e => updateParty('shipper', 'postalCode', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Country *</label>
                  <input
                    type="text"
                    required
                    value={formData.shipper.country}
                    onChange={e => updateParty('shipper', 'country', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Contact Name *</label>
                  <input
                    type="text"
                    required
                    value={formData.shipper.contactName}
                    onChange={e => updateParty('shipper', 'contactName', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Contact Email *</label>
                  <input
                    type="email"
                    required
                    value={formData.shipper.contactEmail}
                    onChange={e => updateParty('shipper', 'contactEmail', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Contact Phone *</label>
                  <input
                    type="tel"
                    required
                    value={formData.shipper.contactPhone}
                    onChange={e => updateParty('shipper', 'contactPhone', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
              </div>
            </div>

            <hr className="border-gray-200" />

            {/* Consignee */}
            <div>
              <h3 className="text-md font-medium text-gray-900 mb-4">Consignee Details</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Company Name *</label>
                  <input
                    type="text"
                    required
                    value={formData.consignee.name}
                    onChange={e => updateParty('consignee', 'name', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Address *</label>
                  <input
                    type="text"
                    required
                    value={formData.consignee.address}
                    onChange={e => updateParty('consignee', 'address', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">City *</label>
                  <input
                    type="text"
                    required
                    value={formData.consignee.city}
                    onChange={e => updateParty('consignee', 'city', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Postal Code *</label>
                  <input
                    type="text"
                    required
                    value={formData.consignee.postalCode}
                    onChange={e => updateParty('consignee', 'postalCode', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Country *</label>
                  <input
                    type="text"
                    required
                    value={formData.consignee.country}
                    onChange={e => updateParty('consignee', 'country', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Contact Name *</label>
                  <input
                    type="text"
                    required
                    value={formData.consignee.contactName}
                    onChange={e => updateParty('consignee', 'contactName', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Contact Email *</label>
                  <input
                    type="email"
                    required
                    value={formData.consignee.contactEmail}
                    onChange={e => updateParty('consignee', 'contactEmail', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Contact Phone *</label>
                  <input
                    type="tel"
                    required
                    value={formData.consignee.contactPhone}
                    onChange={e => updateParty('consignee', 'contactPhone', e.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                  />
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Container Details */}
        {currentStep === 3 && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-gray-900">Step 3: Container Details</h2>
              <button
                type="button"
                onClick={addContainer}
                className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                <span className="mr-1">➕</span>
                Add Container
              </button>
            </div>

            {formData.containers.map((container, index) => (
              <div key={index} className="border border-gray-200 rounded-lg p-4">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-md font-medium text-gray-900">Container {index + 1}</h3>
                  {formData.containers.length > 1 && (
                    <button
                      type="button"
                      onClick={() => removeContainer(index)}
                      className="text-red-600 hover:text-red-800 text-sm"
                    >
                      Remove
                    </button>
                  )}
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700">
                      Container Type *
                    </label>
                    <select
                      value={container.type}
                      onChange={e => updateContainer(index, 'type', e.target.value)}
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                    >
                      <option value="20GP">20' GP</option>
                      <option value="40GP">40' GP</option>
                      <option value="40HC">40' HC</option>
                      <option value="45HC">45' HC</option>
                      <option value="20RF">20' Reefer</option>
                      <option value="40RF">40' Reefer</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700">Quantity *</label>
                    <input
                      type="number"
                      min="1"
                      value={container.quantity}
                      onChange={e =>
                        updateContainer(index, 'quantity', parseInt(e.target.value) || 1)
                      }
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700">Weight (kg)</label>
                    <input
                      type="number"
                      min="0"
                      value={container.weight || ''}
                      onChange={e =>
                        updateContainer(
                          index,
                          'weight',
                          e.target.value ? parseFloat(e.target.value) : undefined
                        )
                      }
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                    />
                  </div>

                  {(container.type === '20RF' || container.type === '40RF') && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700">
                        Temperature (°C)
                      </label>
                      <input
                        type="number"
                        value={container.temperature || ''}
                        onChange={e =>
                          updateContainer(
                            index,
                            'temperature',
                            e.target.value ? parseFloat(e.target.value) : undefined
                          )
                        }
                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                      />
                    </div>
                  )}

                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700">
                      Commodity Description *
                    </label>
                    <textarea
                      required
                      rows={2}
                      value={container.commodityDescription}
                      onChange={e => updateContainer(index, 'commodityDescription', e.target.value)}
                      placeholder="e.g., Electronics, Textiles, Machinery..."
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                    />
                  </div>

                  <div className="md:col-span-2">
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id={`hazmat-${index}`}
                        checked={container.isHazmat}
                        onChange={e => updateContainer(index, 'isHazmat', e.target.checked)}
                        className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                      />
                      <label
                        htmlFor={`hazmat-${index}`}
                        className="ml-2 block text-sm text-gray-900"
                      >
                        Contains Hazardous Materials
                      </label>
                    </div>
                  </div>

                  {container.isHazmat && (
                    <div className="md:col-span-2">
                      <label className="block text-sm font-medium text-gray-700">
                        Hazmat Class (IMO)
                      </label>
                      <input
                        type="text"
                        value={container.hazmatClass || ''}
                        onChange={e => updateContainer(index, 'hazmatClass', e.target.value)}
                        placeholder="e.g., Class 3, Class 8"
                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                      />
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Step 4: Review & Confirmation */}
        {currentStep === 4 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Step 4: Review & Confirmation</h2>

            {/* Rate Quote Summary */}
            {preselectedQuote && (
              <div>
                <h3 className="text-md font-medium text-gray-900 mb-3">Rate Quote</h3>
                <div className="bg-gray-50 rounded-lg p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="font-semibold">{preselectedQuote.carrier.name}</div>
                      <div className="text-sm text-gray-600">
                        {preselectedQuote.route.originPort} →{' '}
                        {preselectedQuote.route.destinationPort}
                      </div>
                      <div className="text-sm text-gray-600">
                        Transit: {preselectedQuote.route.transitDays} days
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-xl font-bold text-blue-600">
                        ${preselectedQuote.pricing.totalAmount.toLocaleString()}
                      </div>
                      <div className="text-sm text-gray-500">
                        {preselectedQuote.pricing.currency}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Shipper */}
            <div>
              <h3 className="text-md font-medium text-gray-900 mb-3">Shipper</h3>
              <div className="bg-gray-50 rounded-lg p-4 text-sm">
                <div className="font-semibold">{formData.shipper.name}</div>
                <div className="text-gray-600">
                  {formData.shipper.address}, {formData.shipper.city}, {formData.shipper.postalCode}
                  , {formData.shipper.country}
                </div>
                <div className="text-gray-600 mt-2">
                  Contact: {formData.shipper.contactName} ({formData.shipper.contactEmail},{' '}
                  {formData.shipper.contactPhone})
                </div>
              </div>
            </div>

            {/* Consignee */}
            <div>
              <h3 className="text-md font-medium text-gray-900 mb-3">Consignee</h3>
              <div className="bg-gray-50 rounded-lg p-4 text-sm">
                <div className="font-semibold">{formData.consignee.name}</div>
                <div className="text-gray-600">
                  {formData.consignee.address}, {formData.consignee.city},{' '}
                  {formData.consignee.postalCode}, {formData.consignee.country}
                </div>
                <div className="text-gray-600 mt-2">
                  Contact: {formData.consignee.contactName} ({formData.consignee.contactEmail},{' '}
                  {formData.consignee.contactPhone})
                </div>
              </div>
            </div>

            {/* Containers */}
            <div>
              <h3 className="text-md font-medium text-gray-900 mb-3">Containers</h3>
              <div className="space-y-2">
                {formData.containers.map((container, index) => (
                  <div key={index} className="bg-gray-50 rounded-lg p-4 text-sm">
                    <div className="font-semibold">
                      {container.quantity}x {container.type}
                    </div>
                    <div className="text-gray-600">Commodity: {container.commodityDescription}</div>
                    {container.weight && (
                      <div className="text-gray-600">Weight: {container.weight} kg</div>
                    )}
                    {container.isHazmat && (
                      <div className="text-red-600 font-medium">
                        ⚠️ Hazmat {container.hazmatClass && `- ${container.hazmatClass}`}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            {/* Special Instructions */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Special Instructions (Optional)
              </label>
              <textarea
                rows={4}
                value={formData.specialInstructions || ''}
                onChange={e => setFormData({ ...formData, specialInstructions: e.target.value })}
                placeholder="Any special handling requirements, pickup instructions, etc."
                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
              />
            </div>

            {/* Terms */}
            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
              <div className="text-sm text-yellow-800">
                <p className="font-semibold mb-2">Please review carefully:</p>
                <ul className="list-disc list-inside space-y-1">
                  <li>All information provided is accurate and complete</li>
                  <li>You agree to the carrier's terms and conditions</li>
                  <li>Final booking confirmation will be sent via email</li>
                  <li>Payment details will be provided separately</li>
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Navigation Buttons */}
      <div className="flex items-center justify-between bg-white rounded-lg shadow p-6">
        <button
          type="button"
          onClick={handleBack}
          disabled={currentStep === 1}
          className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M15 19l-7-7 7-7"
            />
          </svg>
          Back
        </button>

        {currentStep < 4 ? (
          <button
            type="button"
            onClick={handleNext}
            disabled={!isStepValid(currentStep)}
            className="inline-flex items-center px-6 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Next
            <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        ) : (
          <button
            type="button"
            onClick={handleSubmit}
            disabled={createBookingMutation.isPending || !isStepValid(4)}
            className="inline-flex items-center px-6 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {createBookingMutation.isPending ? (
              <>
                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                Creating Booking...
              </>
            ) : (
              <>
                <span className="mr-2">✓</span>
                Confirm Booking
              </>
            )}
          </button>
        )}
      </div>
    </div>
  );
}