/**
 * Advanced Rate Search Page
 *
 * Complete search form with all filters and best options display
 */

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

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

interface SearchForm {
  // General
  origin: string;
  destination: string;

  // Conditionnement
  packages: Package[];

  // Douane
  eurDocument: boolean;
  customsStop: boolean;
  exportAssistance: boolean;

  // Marchandise
  dangerousGoods: boolean;
  specialHandling: boolean;

  // Manutention
  tailgate: boolean;
  straps: boolean;
  thermalCover: boolean;

  // Autres
  regulatedProducts: boolean;
  appointment: boolean;
  insurance: boolean;
  t1Document: boolean;
}

export default function AdvancedSearchPage() {
  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);

  // Calculate total volume and weight
  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();

    // Build query parameters
    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(),
    });

    // Redirect to results page
    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">1. Informations Générales</h2>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Port d'origine *
          </label>
          <input
            type="text"
            value={searchForm.origin}
            onChange={e => setSearchForm({ ...searchForm, origin: e.target.value.toUpperCase() })}
            placeholder="ex: FRPAR"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Port de destination *
          </label>
          <input
            type="text"
            value={searchForm.destination}
            onChange={e =>
              setSearchForm({ ...searchForm, destination: e.target.value.toUpperCase() })
            }
            placeholder="ex: CNSHA"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
          />
        </div>
      </div>
    </div>
  );

  const renderStep2 = () => (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-gray-900">2. Conditionnement</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"
        >
          + Ajouter un colis
        </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">Colis #{index + 1}</h3>
            {searchForm.packages.length > 1 && (
              <button
                type="button"
                onClick={() => removePackage(index)}
                className="text-sm text-red-600 hover:text-red-700"
              >
                Supprimer
              </button>
            )}
          </div>

          <div className="grid grid-cols-5 gap-3">
            <div>
              <label className="block text-xs font-medium text-gray-700 mb-1">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">Caisse</option>
                <option value="colis">Colis</option>
                <option value="palette">Palette</option>
                <option value="autre">Autre</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-medium text-gray-700 mb-1">Quantité</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">L (cm)</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">l (cm)</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">H (cm)</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">Poids (kg)</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">Gerbable</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">Récapitulatif</h3>
        <div className="text-sm text-blue-800 space-y-1">
          <div>Volume total: {calculateTotals().totalVolumeCBM.toFixed(2)} m³</div>
          <div>Poids total: {calculateTotals().totalWeightKG} kg</div>
          <div>Palettes: {calculateTotals().totalPallets}</div>
        </div>
      </div>
    </div>
  );

  const renderStep3 = () => (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-gray-900">3. Options & Services</h2>

      <div className="space-y-4">
        <div className="border-b pb-4">
          <h3 className="text-sm font-semibold text-gray-900 mb-3">Douane Import / Export</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">EUR 1</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">T1</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">Stop douane</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">Assistance export</span>
            </label>
          </div>
        </div>

        <div className="border-b pb-4">
          <h3 className="text-sm font-semibold text-gray-900 mb-3">Marchandise</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">Marchandise Dangereuse</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">Produits règlementés</span>
            </label>
          </div>
        </div>

        <div className="border-b pb-4">
          <h3 className="text-sm font-semibold text-gray-900 mb-3">Manutention particulière</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">Manutention spéciale</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">Hayon</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">Sangles</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">Couverture thermique</span>
            </label>
          </div>
        </div>

        <div>
          <h3 className="text-sm font-semibold text-gray-900 mb-3">Autres options</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">Rendez-vous livraison</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">Assurance</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Recherche Avancée de Tarifs</h1>
        <p className="text-sm text-gray-500 mt-1">
          Formulaire complet avec toutes les options de transport
        </p>
      </div>

      {/* Progress Steps */}
      <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>

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

        {/* Navigation */}
        <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"
          >
            Précédent
          </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"
            >
              Suivant
            </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"
            >
              🔍 Rechercher les tarifs
            </button>
          )}
        </div>
      </div>

    </div>
  );
}
