'use client';

import { useState, useEffect } from 'react';
import { useRouter } from '@/i18n/navigation';
import { Search, Loader2 } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { useTranslations } from 'next-intl';
import {
  getAvailableOrigins,
  getAvailableDestinations,
  RoutePortInfo,
} from '@/lib/api/rates';
import dynamic from 'next/dynamic';

const PortRouteMapLoader = () => {
  const t = useTranslations('dashboard.rateSearch');
  return <div className="h-80 bg-gray-100 rounded-lg flex items-center justify-center">{t('mapLoading')}</div>;
};

const PortRouteMap = dynamic(() => import('@/components/PortRouteMap'), {
  ssr: false,
  loading: PortRouteMapLoader,
});

interface Package {
  type: 'caisse' | 'colis' | 'palette' | 'autre';
  quantity: number;
  length: number;
  width: number;
  height: number;
  weight: number;
  stackable: boolean;
}

interface SearchForm {
  origin: string;
  destination: string;
  packages: Package[];
  eurDocument: boolean;
  customsStop: boolean;
  exportAssistance: boolean;
  dangerousGoods: boolean;
  specialHandling: boolean;
  tailgate: boolean;
  straps: boolean;
  thermalCover: boolean;
  regulatedProducts: boolean;
  appointment: boolean;
  insurance: boolean;
  t1Document: boolean;
}

export default function AdvancedSearchPage() {
  const t = useTranslations('dashboard.rateSearch');
  const router = useRouter();
  const [searchForm, setSearchForm] = useState<SearchForm>({
    origin: '',
    destination: '',
    packages: [
      {
        type: 'palette',
        quantity: 1,
        length: 120,
        width: 80,
        height: 100,
        weight: 500,
        stackable: true,
      },
    ],
    eurDocument: false,
    customsStop: false,
    exportAssistance: false,
    dangerousGoods: false,
    specialHandling: false,
    tailgate: false,
    straps: false,
    thermalCover: false,
    regulatedProducts: false,
    appointment: false,
    insurance: false,
    t1Document: false,
  });

  const [currentStep, setCurrentStep] = useState(1);
  const [originSearch, setOriginSearch] = useState('');
  const [destinationSearch, setDestinationSearch] = useState('');
  const [showOriginDropdown, setShowOriginDropdown] = useState(false);
  const [showDestinationDropdown, setShowDestinationDropdown] = useState(false);
  const [selectedOriginPort, setSelectedOriginPort] = useState<RoutePortInfo | null>(null);
  const [selectedDestinationPort, setSelectedDestinationPort] = useState<RoutePortInfo | null>(null);

  const { data: originsData, isLoading: isLoadingOrigins } = useQuery({
    queryKey: ['available-origins'],
    queryFn: getAvailableOrigins,
  });

  const { data: destinationsData, isLoading: isLoadingDestinations } = useQuery({
    queryKey: ['available-destinations', searchForm.origin],
    queryFn: () => getAvailableDestinations(searchForm.origin),
    enabled: !!searchForm.origin,
  });

  const filteredOrigins = (originsData?.origins || []).filter(port => {
    if (!originSearch || originSearch.length < 1) return true;
    const searchLower = originSearch.toLowerCase();
    return (
      port.code.toLowerCase().includes(searchLower) ||
      port.name.toLowerCase().includes(searchLower) ||
      port.city.toLowerCase().includes(searchLower) ||
      port.countryName.toLowerCase().includes(searchLower)
    );
  });

  const filteredDestinations = (destinationsData?.destinations || []).filter(port => {
    if (!destinationSearch || destinationSearch.length < 1) return true;
    const searchLower = destinationSearch.toLowerCase();
    return (
      port.code.toLowerCase().includes(searchLower) ||
      port.name.toLowerCase().includes(searchLower) ||
      port.city.toLowerCase().includes(searchLower) ||
      port.countryName.toLowerCase().includes(searchLower)
    );
  });

  useEffect(() => {
    if (searchForm.origin && selectedDestinationPort) {
      const isValidDestination = destinationsData?.destinations?.some(
        d => d.code === searchForm.destination
      );
      if (!isValidDestination) {
        setSearchForm(prev => ({ ...prev, destination: '' }));
        setSelectedDestinationPort(null);
        setDestinationSearch('');
      }
    }
  }, [searchForm.origin, destinationsData]);

  const calculateTotals = () => {
    let totalVolumeCBM = 0;
    let totalWeightKG = 0;
    let totalPallets = 0;

    searchForm.packages.forEach(pkg => {
      const volumeM3 = (pkg.length * pkg.width * pkg.height) / 1000000;
      totalVolumeCBM += volumeM3 * pkg.quantity;
      totalWeightKG += pkg.weight * pkg.quantity;
      if (pkg.type === 'palette') {
        totalPallets += pkg.quantity;
      }
    });

    return { totalVolumeCBM, totalWeightKG, totalPallets };
  };

  const handleSearch = () => {
    const { totalVolumeCBM, totalWeightKG, totalPallets } = calculateTotals();

    const params = new URLSearchParams({
      origin: searchForm.origin,
      destination: searchForm.destination,
      volumeCBM: totalVolumeCBM.toString(),
      weightKG: totalWeightKG.toString(),
      palletCount: totalPallets.toString(),
      hasDangerousGoods: searchForm.dangerousGoods.toString(),
      requiresSpecialHandling: searchForm.specialHandling.toString(),
      requiresTailgate: searchForm.tailgate.toString(),
      requiresStraps: searchForm.straps.toString(),
      requiresThermalCover: searchForm.thermalCover.toString(),
      hasRegulatedProducts: searchForm.regulatedProducts.toString(),
      requiresAppointment: searchForm.appointment.toString(),
    });

    router.push(`/dashboard/search-advanced/results?${params.toString()}`);
  };

  const addPackage = () => {
    setSearchForm({
      ...searchForm,
      packages: [
        ...searchForm.packages,
        {
          type: 'palette',
          quantity: 1,
          length: 120,
          width: 80,
          height: 100,
          weight: 500,
          stackable: true,
        },
      ],
    });
  };

  const removePackage = (index: number) => {
    setSearchForm({
      ...searchForm,
      packages: searchForm.packages.filter((_, i) => i !== index),
    });
  };

  const updatePackage = (index: number, field: keyof Package, value: any) => {
    const newPackages = [...searchForm.packages];
    newPackages[index] = { ...newPackages[index], [field]: value };
    setSearchForm({ ...searchForm, packages: newPackages });
  };

  const renderStep1 = () => (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-gray-900">{t('step1.title')}</h2>

      <div className="grid grid-cols-2 gap-4">
        <div className="relative">
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {t('step1.originLabel')} {searchForm.origin && <span className="text-green-600 text-xs">{t('step1.selected')}</span>}
          </label>
          <div className="relative">
            <input
              type="text"
              value={originSearch}
              onChange={e => {
                setOriginSearch(e.target.value);
                setShowOriginDropdown(true);
                if (selectedOriginPort && e.target.value !== selectedOriginPort.displayName) {
                  setSearchForm({ ...searchForm, origin: '', destination: '' });
                  setSelectedOriginPort(null);
                  setSelectedDestinationPort(null);
                  setDestinationSearch('');
                }
              }}
              onFocus={() => setShowOriginDropdown(true)}
              onBlur={() => setTimeout(() => setShowOriginDropdown(false), 200)}
              placeholder={t('step1.originPlaceholder')}
              className={`w-full px-3 py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500 ${
                searchForm.origin ? 'border-green-500 bg-green-50' : 'border-gray-300'
              }`}
            />
            {isLoadingOrigins && (
              <div className="absolute right-3 top-1/2 -translate-y-1/2">
                <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
              </div>
            )}
          </div>
          {showOriginDropdown && filteredOrigins.length > 0 && (
            <div className="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto z-50">
              {filteredOrigins.slice(0, 15).map((port: RoutePortInfo) => (
                <button
                  key={port.code}
                  type="button"
                  onClick={() => {
                    setSearchForm({ ...searchForm, origin: port.code, destination: '' });
                    setOriginSearch(port.displayName);
                    setSelectedOriginPort(port);
                    setSelectedDestinationPort(null);
                    setDestinationSearch('');
                    setShowOriginDropdown(false);
                  }}
                  className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-100 last:border-b-0"
                >
                  <div className="font-medium text-gray-900">{port.name}</div>
                  <div className="text-gray-500 text-xs mt-1">
                    {port.code} - {port.city}, {port.countryName}
                  </div>
                </button>
              ))}
              {filteredOrigins.length > 15 && (
                <div className="px-4 py-2 text-xs text-gray-500 bg-gray-50">
                  {t('step1.moreResults', { count: filteredOrigins.length - 15 })}
                </div>
              )}
            </div>
          )}
          {showOriginDropdown && filteredOrigins.length === 0 && !isLoadingOrigins && originsData && (
            <div className="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg p-4 z-50">
              <p className="text-sm text-gray-500">{t('step1.noOrigin', { query: originSearch })}</p>
            </div>
          )}
        </div>

        <div className="relative">
          <label className="block text-sm font-medium text-gray-700 mb-2">
            {t('step1.destinationLabel')} {searchForm.destination && <span className="text-green-600 text-xs">{t('step1.selected')}</span>}
          </label>
          <div className="relative">
            <input
              type="text"
              value={destinationSearch}
              onChange={e => {
                setDestinationSearch(e.target.value);
                setShowDestinationDropdown(true);
                if (selectedDestinationPort && e.target.value !== selectedDestinationPort.displayName) {
                  setSearchForm({ ...searchForm, destination: '' });
                  setSelectedDestinationPort(null);
                }
              }}
              onFocus={() => setShowDestinationDropdown(true)}
              onBlur={() => setTimeout(() => setShowDestinationDropdown(false), 200)}
              disabled={!searchForm.origin}
              placeholder={searchForm.origin ? t('step1.destinationPlaceholder') : t('step1.destinationDisabled')}
              className={`w-full px-3 py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500 ${
                searchForm.destination ? 'border-green-500 bg-green-50' : 'border-gray-300'
              } ${!searchForm.origin ? 'bg-gray-100 cursor-not-allowed' : ''}`}
            />
            {isLoadingDestinations && searchForm.origin && (
              <div className="absolute right-3 top-1/2 -translate-y-1/2">
                <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
              </div>
            )}
          </div>
          {searchForm.origin && destinationsData?.total !== undefined && (
            <p className="text-xs text-gray-500 mt-1">
              {t('step1.availableDestinations', { count: destinationsData.total, port: selectedOriginPort?.name || searchForm.origin })}
            </p>
          )}
          {showDestinationDropdown && filteredDestinations.length > 0 && (
            <div className="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto z-50">
              {filteredDestinations.slice(0, 15).map((port: RoutePortInfo) => (
                <button
                  key={port.code}
                  type="button"
                  onClick={() => {
                    setSearchForm({ ...searchForm, destination: port.code });
                    setDestinationSearch(port.displayName);
                    setSelectedDestinationPort(port);
                    setShowDestinationDropdown(false);
                  }}
                  className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-100 last:border-b-0"
                >
                  <div className="font-medium text-gray-900">{port.name}</div>
                  <div className="text-gray-500 text-xs mt-1">
                    {port.code} - {port.city}, {port.countryName}
                  </div>
                </button>
              ))}
              {filteredDestinations.length > 15 && (
                <div className="px-4 py-2 text-xs text-gray-500 bg-gray-50">
                  {t('step1.moreResults', { count: filteredDestinations.length - 15 })}
                </div>
              )}
            </div>
          )}
          {showDestinationDropdown && filteredDestinations.length === 0 && !isLoadingDestinations && searchForm.origin && destinationsData && (
            <div className="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg p-4 z-50">
              <p className="text-sm text-gray-500">{t('step1.noDestination', { query: destinationSearch })}</p>
            </div>
          )}
        </div>
      </div>

      {selectedOriginPort && selectedDestinationPort && selectedOriginPort.latitude && selectedDestinationPort.latitude && (
        <div className="mt-6 border border-gray-200 rounded-lg overflow-hidden">
          <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
            <h3 className="text-sm font-semibold text-gray-900">
              {t('step1.routeTitle', { origin: selectedOriginPort.name, destination: selectedDestinationPort.name })}
            </h3>
            <p className="text-xs text-gray-500 mt-1">
              {t('step1.routeDescription')}
            </p>
          </div>
          <PortRouteMap
            portA={{
              lat: selectedOriginPort.latitude,
              lng: selectedOriginPort.longitude!,
            }}
            portB={{
              lat: selectedDestinationPort.latitude,
              lng: selectedDestinationPort.longitude!,
            }}
            height="400px"
          />
        </div>
      )}
    </div>
  );

  const renderStep2 = () => {
    const totals = calculateTotals();
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold text-gray-900">{t('step2.title')}</h2>
          <button
            type="button"
            onClick={addPackage}
            className="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
          >
            {t('step2.addPackage')}
          </button>
        </div>

        {searchForm.packages.map((pkg, index) => (
          <div key={index} className="border border-gray-200 rounded-lg p-4 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-medium text-gray-900">{t('step2.packageNumber', { number: index + 1 })}</h3>
              {searchForm.packages.length > 1 && (
                <button
                  type="button"
                  onClick={() => removePackage(index)}
                  className="text-sm text-red-600 hover:text-red-700"
                >
                  {t('step2.remove')}
                </button>
              )}
            </div>

            <div className="grid grid-cols-5 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.type')}</label>
                <select
                  value={pkg.type}
                  onChange={e => updatePackage(index, 'type', e.target.value)}
                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
                >
                  <option value="caisse">{t('step2.packageTypes.caisse')}</option>
                  <option value="colis">{t('step2.packageTypes.colis')}</option>
                  <option value="palette">{t('step2.packageTypes.palette')}</option>
                  <option value="autre">{t('step2.packageTypes.autre')}</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.quantity')}</label>
                <input
                  type="number"
                  min="1"
                  value={pkg.quantity}
                  onChange={e => updatePackage(index, 'quantity', parseInt(e.target.value) || 1)}
                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.length')}</label>
                <input
                  type="number"
                  min="1"
                  value={pkg.length}
                  onChange={e => updatePackage(index, 'length', parseInt(e.target.value) || 0)}
                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.width')}</label>
                <input
                  type="number"
                  min="1"
                  value={pkg.width}
                  onChange={e => updatePackage(index, 'width', parseInt(e.target.value) || 0)}
                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.height')}</label>
                <input
                  type="number"
                  min="1"
                  value={pkg.height}
                  onChange={e => updatePackage(index, 'height', parseInt(e.target.value) || 0)}
                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.weight')}</label>
                <input
                  type="number"
                  min="1"
                  value={pkg.weight}
                  onChange={e => updatePackage(index, 'weight', parseInt(e.target.value) || 0)}
                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
                />
              </div>

              <div className="flex items-center pt-6">
                <input
                  type="checkbox"
                  checked={pkg.stackable}
                  onChange={e => updatePackage(index, 'stackable', e.target.checked)}
                  className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                />
                <label className="ml-2 text-sm text-gray-700">{t('step2.stackable')}</label>
              </div>
            </div>
          </div>
        ))}

        <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
          <h3 className="text-sm font-medium text-blue-900 mb-2">{t('step2.summary.title')}</h3>
          <div className="text-sm text-blue-800 space-y-1">
            <div>{t('step2.summary.volume', { value: totals.totalVolumeCBM.toFixed(2) })}</div>
            <div>{t('step2.summary.weight', { value: totals.totalWeightKG })}</div>
            <div>{t('step2.summary.pallets', { value: totals.totalPallets })}</div>
          </div>
        </div>
      </div>
    );
  };

  const renderStep3 = () => (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-gray-900">{t('step3.title')}</h2>

      <div className="space-y-4">
        <div className="border-b pb-4">
          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.customs.title')}</h3>
          <div className="space-y-2">
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.eurDocument}
                onChange={e => setSearchForm({ ...searchForm, eurDocument: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.eurDocument')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.t1Document}
                onChange={e => setSearchForm({ ...searchForm, t1Document: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.t1Document')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.customsStop}
                onChange={e => setSearchForm({ ...searchForm, customsStop: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.customsStop')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.exportAssistance}
                onChange={e =>
                  setSearchForm({ ...searchForm, exportAssistance: e.target.checked })
                }
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.exportAssistance')}</span>
            </label>
          </div>
        </div>

        <div className="border-b pb-4">
          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.goods.title')}</h3>
          <div className="space-y-2">
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.dangerousGoods}
                onChange={e => setSearchForm({ ...searchForm, dangerousGoods: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.goods.dangerous')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.regulatedProducts}
                onChange={e =>
                  setSearchForm({ ...searchForm, regulatedProducts: e.target.checked })
                }
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.goods.regulated')}</span>
            </label>
          </div>
        </div>

        <div className="border-b pb-4">
          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.handling.title')}</h3>
          <div className="space-y-2">
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.specialHandling}
                onChange={e =>
                  setSearchForm({ ...searchForm, specialHandling: e.target.checked })
                }
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.special')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.tailgate}
                onChange={e => setSearchForm({ ...searchForm, tailgate: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.tailgate')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.straps}
                onChange={e => setSearchForm({ ...searchForm, straps: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.straps')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.thermalCover}
                onChange={e => setSearchForm({ ...searchForm, thermalCover: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.thermalCover')}</span>
            </label>
          </div>
        </div>

        <div>
          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.other.title')}</h3>
          <div className="space-y-2">
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.appointment}
                onChange={e => setSearchForm({ ...searchForm, appointment: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.other.appointment')}</span>
            </label>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={searchForm.insurance}
                onChange={e => setSearchForm({ ...searchForm, insurance: e.target.checked })}
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">{t('step3.other.insurance')}</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
        <p className="text-sm text-gray-500 mt-1">
          {t('subtitle')}
        </p>
      </div>

      <div className="flex items-center justify-center space-x-4">
        {[1, 2, 3].map(step => (
          <div key={step} className="flex items-center">
            <div
              className={`flex items-center justify-center w-10 h-10 rounded-full ${
                currentStep >= step ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600'
              }`}
            >
              {step}
            </div>
            {step < 3 && (
              <div
                className={`w-20 h-1 mx-2 ${
                  currentStep > step ? 'bg-blue-600' : 'bg-gray-200'
                }`}
              />
            )}
          </div>
        ))}
      </div>

      <div className="bg-white rounded-lg shadow p-8">
        {currentStep === 1 && renderStep1()}
        {currentStep === 2 && renderStep2()}
        {currentStep === 3 && renderStep3()}

        <div className="mt-8 flex items-center justify-between pt-6 border-t">
          <button
            type="button"
            onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
            disabled={currentStep === 1}
            className="px-6 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {t('navigation.previous')}
          </button>

          {currentStep < 3 ? (
            <button
              type="button"
              onClick={() => setCurrentStep(currentStep + 1)}
              disabled={!searchForm.origin || !searchForm.destination}
              className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {t('navigation.next')}
            </button>
          ) : (
            <button
              type="button"
              onClick={handleSearch}
              disabled={!searchForm.origin || !searchForm.destination}
              className="px-6 py-3 text-base font-medium text-white bg-green-600 rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
            >
              <Search className="h-5 w-5 mr-2" /> {t('navigation.search')}
            </button>
          )}
        </div>
      </div>

    </div>
  );
}