import React from 'react';
import { useRouter } from 'next/router';
import { LaximoVehicleSearchResult, LaximoCatalogInfo } from '@/types/laximo';

interface VehicleSearchResultsProps {
  results: LaximoVehicleSearchResult[];
  catalogInfo: LaximoCatalogInfo;
}

const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
  results,
  catalogInfo
}) => {
  const router = useRouter();

  const handleSelectVehicle = (vehicle: LaximoVehicleSearchResult) => {
    console.log('🚗 handleSelectVehicle вызвана для:', vehicle);
    
    // Формируем SSD из данных vehicle или берем из router query
    const routerSsd = Array.isArray(router.query.ssd) ? router.query.ssd[0] : router.query.ssd;
    const ssd = vehicle.ssd || routerSsd || '';
    const brand = router.query.brand || catalogInfo.code;
    
    console.log('🚗 Selected vehicle:', vehicle);
    console.log('🔧 Vehicle SSD:', vehicle.ssd ? `${vehicle.ssd.substring(0, 50)}...` : 'отсутствует');
    console.log('🔧 Router SSD:', routerSsd ? `${routerSsd.substring(0, 50)}...` : 'отсутствует');
    console.log('🔧 Final SSD to pass:', ssd ? `${ssd.substring(0, 50)}...` : 'отсутствует');
    console.log('🔧 SSD length:', ssd.length);
    console.log('🔧 Brand для навигации:', brand);
    console.log('🔧 Vehicle ID:', vehicle.vehicleid);
    
    // Переходим на страницу автомобиля с SSD
    if (ssd && ssd.trim() !== '') {
      // Всегда используем localStorage для SSD, так как VW SSD очень длинные
      console.log('💾 Сохраняем SSD в localStorage для безопасной передачи');
      const vehicleKey = `vehicle_ssd_${brand}_${vehicle.vehicleid}`;
      console.log('💾 Ключ localStorage:', vehicleKey);
      localStorage.setItem(vehicleKey, ssd);
      console.log('💾 SSD сохранен в localStorage');
      
      const targetUrl = `/vehicle-search/${brand}/${vehicle.vehicleid}?use_storage=1&ssd_length=${ssd.length}`;
      console.log('🔗 Переходим по URL:', targetUrl);
      router.push(targetUrl);
    } else {
      console.log('⚠️ SSD отсутствует, переходим без него');
      router.push(`/vehicle-search/${brand}/${vehicle.vehicleid}`);
    }
  };

  // Функция для условного отображения атрибута
  const renderAttribute = (label: string, value: string | undefined) => {
    if (!value || value === '' || value === 'undefined') return null
    return (
      <div className="flex justify-between py-1 border-b border-gray-100">
        <span className="text-sm text-gray-600 font-medium">{label}:</span>
        <span className="text-sm text-gray-900">{value}</span>
      </div>
    )
  }

  if (results.length === 0) {
    return null;
  }

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-900">
        Найдено автомобилей: {results.length}
      </h3>
      
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {results.map((vehicle, index) => (
          <div
            key={`${vehicle.vehicleid}-${index}`}
            className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow cursor-pointer"
            onClick={() => handleSelectVehicle(vehicle)}
          >
            {/* Заголовок автомобиля */}
            <div className="mb-3">
              <h4 className="text-lg font-semibold text-blue-600 mb-1">
                {vehicle.name || `${vehicle.brand} ${vehicle.model}`}
              </h4>
              <p className="text-sm text-gray-500">
                {vehicle.modification} ({vehicle.year})
              </p>
            </div>

            {/* Основные характеристики */}
            <div className="space-y-1 mb-4">
              <h5 className="text-sm font-semibold text-gray-700 mb-2">Основные характеристики</h5>
              {renderAttribute('Марка', vehicle.brand)}
              {renderAttribute('Модель', vehicle.model)}
              {renderAttribute('Год', vehicle.year)}
              {renderAttribute('Кузов', vehicle.bodytype)}
              {renderAttribute('Двигатель', vehicle.engine)}
              {renderAttribute('Трансмиссия', vehicle.transmission)}
            </div>

            {/* Дополнительные характеристики */}
            <div className="space-y-1 mb-4">
              <h5 className="text-sm font-semibold text-gray-700 mb-2">Дополнительные характеристики</h5>
              {renderAttribute('Класс', vehicle.grade)}
              {renderAttribute('Цвет кузова', vehicle.framecolor)}
              {renderAttribute('Цвет салона', vehicle.trimcolor)}
              {renderAttribute('Рынок', vehicle.market)}
              {renderAttribute('Регион производства', vehicle.creationregion)}
              {renderAttribute('Регион назначения', vehicle.destinationregion)}
            </div>

            {/* Технические характеристики */}
            <div className="space-y-1 mb-4">
              <h5 className="text-sm font-semibold text-gray-700 mb-2">Технические характеристики</h5>
              {renderAttribute('Информация о двигателе', vehicle.engine_info)}
              {renderAttribute('Номер двигателя', vehicle.engineno)}
              {renderAttribute('Дата производства', vehicle.date)}
              {renderAttribute('Произведен', vehicle.manufactured)}
              {renderAttribute('Период производства', vehicle.prodPeriod)}
              {renderAttribute('Диапазон производства', vehicle.prodRange)}
            </div>

            {/* Даты и периоды */}
            <div className="space-y-1 mb-4">
              <h5 className="text-sm font-semibold text-gray-700 mb-2">Даты и периоды</h5>
              {renderAttribute('Дата с', vehicle.datefrom)}
              {renderAttribute('Дата по', vehicle.dateto)}
              {renderAttribute('Модельный год с', vehicle.modelyearfrom)}
              {renderAttribute('Модельный год по', vehicle.modelyearto)}
            </div>

            {/* Опции и описание */}
            {(vehicle.options || vehicle.description || vehicle.notes) && (
              <div className="space-y-1 mb-4">
                <h5 className="text-sm font-semibold text-gray-700 mb-2">Опции и описание</h5>
                {renderAttribute('Опции', vehicle.options)}
                {renderAttribute('Описание', vehicle.description)}
                {renderAttribute('Примечания', vehicle.notes)}
              </div>
            )}

            {/* Системная информация */}
            <div className="mt-4 pt-3 border-t border-gray-200">
              <div className="text-xs text-gray-400 space-y-1">
                <div>ID: {vehicle.vehicleid}</div>
                {vehicle.catalog && <div>Каталог: {vehicle.catalog}</div>}
                {vehicle.ssd && (
                  <div>SSD: {vehicle.ssd.length > 50 ? `${vehicle.ssd.substring(0, 50)}...` : vehicle.ssd}</div>
                )}
              </div>
            </div>

            {/* Debug информация (только в development) */}
            {process.env.NODE_ENV === 'development' && (
              <div className="mt-4 p-2 bg-gray-100 rounded text-xs">
                <div className="font-semibold text-gray-700 mb-1">Debug Info:</div>
                <pre className="text-gray-600 whitespace-pre-wrap">
                  {JSON.stringify(vehicle, null, 2)}
                </pre>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default VehicleSearchResults;