import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useQuery } from '@apollo/client';
import Head from 'next/head';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import { FIND_LAXIMO_VEHICLES_BY_PART_NUMBER } from '@/lib/graphql';
import { LaximoVehiclesByPartResult, LaximoVehicleSearchResult } from '@/types/laximo';
import MetaTags from "../components/MetaTags";
import { getMetaByPath } from "../lib/meta-config";

const VehiclesByPartPage = () => {
  const router = useRouter();
  const { partNumber, catalogCode } = router.query;
  const [selectedCatalog, setSelectedCatalog] = useState<string>('all');

  // Отладочная информация
  console.log('🔍 VehiclesByPartPage - URL параметры:', { partNumber, catalogCode });
  console.log('🔍 VehiclesByPartPage - Тип partNumber:', typeof partNumber, 'Значение:', partNumber);

  // Очищаем артикул от лишних символов
  const cleanPartNumber = partNumber ? (partNumber as string).trim() : '';
  console.log('🔍 VehiclesByPartPage - Очищенный артикул:', cleanPartNumber);

  // Запрос для поиска автомобилей по артикулу
  const { data, loading, error } = useQuery<{ laximoFindVehiclesByPartNumber: LaximoVehiclesByPartResult }>(
    FIND_LAXIMO_VEHICLES_BY_PART_NUMBER,
    {
      variables: { partNumber: cleanPartNumber },
      skip: !cleanPartNumber,
      errorPolicy: 'all'
    }
  );

  const handleVehicleSelect = (vehicle: LaximoVehicleSearchResult) => {
    // Переходим сразу на страницу поиска результатов с артикулом
    console.log('🔍 Переход на поиск результатов с артикулом:', { partNumber: cleanPartNumber, vehicle: vehicle.name });
    
    // Определяем бренд для поиска (используем первое слово из названия автомобиля или бренд)
    const vehicleBrand = vehicle.brand || vehicle.name?.split(' ')[0] || 'UNKNOWN';
    
    // Переходим на search-result с артикулом
    const url = `/search-result?article=${encodeURIComponent(cleanPartNumber)}&brand=${encodeURIComponent(vehicleBrand)}`;
    router.push(url);
  };

  const handleBackToSearch = () => {
    router.back();
  };

  const metaConfig = getMetaByPath('/vehicles-by-part');

  if (loading) {
    return (
      <>
        <MetaTags 
          title="Поиск автомобилей по артикулу - Protek"
          description="Поиск автомобилей, в которых используется деталь..."
        />
        <main className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-red-600 mx-auto"></div>
            <p className="mt-4 text-lg text-gray-600">Поиск автомобилей...</p>
          </div>
        </main>
        <Footer />
      </>
    );
  }

  if (error || !data?.laximoFindVehiclesByPartNumber) {
    return (
      <>
        <MetaTags 
          title="Ошибка поиска - Protek"
          description="Произошла ошибка при поиске автомобилей по артикулу"
        />
        <main className="min-h-screen bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="text-red-500 mb-4">
              <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L4.316 14.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
            </div>
            <h1 className="text-2xl font-bold text-gray-900 mb-4">Ошибка поиска</h1>
            <p className="text-gray-600 mb-8">Не удалось найти автомобили по артикулу {cleanPartNumber}</p>
            <button
              onClick={handleBackToSearch}
              className="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors"
            >
              Назад к поиску
            </button>
          </div>
        </main>
        <Footer />
      </>
    );
  }

  const result = data.laximoFindVehiclesByPartNumber;
  
  // Фильтруем каталоги по выбранному
  const filteredCatalogs = selectedCatalog === 'all' 
    ? result.catalogs 
    : result.catalogs.filter(catalog => catalog.catalogCode === selectedCatalog);

  return (
    <>
      <MetaTags 
        title={cleanPartNumber ? `Автомобили по артикулу ${cleanPartNumber} - Protek` : metaConfig.title}
        description={cleanPartNumber ? `Поиск автомобилей, в которых используется деталь с артикулом ${cleanPartNumber}` : metaConfig.description}
        keywords={metaConfig.keywords}
        ogTitle={metaConfig.ogTitle}
        ogDescription={metaConfig.ogDescription}
      />
      <Header />
      
      <main className="min-h-screen bg-gray-50">
        {/* Навигация */}
        <nav className="bg-white border-b">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              <div className="flex items-center space-x-4">
                <button
                  onClick={handleBackToSearch}
                  className="text-gray-500 hover:text-gray-700 flex items-center space-x-2"
                >
                  <svg className="w-5 h-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>
                  <span>Назад</span>
                </button>
                <div className="text-sm text-gray-500">
                  <span>Главная</span>
                  <span className="mx-2">/</span>
                  <span>Поиск</span>
                  <span className="mx-2">/</span>
                  <span className="text-gray-900 font-medium">Автомобили по артикулу {cleanPartNumber}</span>
                </div>
              </div>
            </div>
          </div>
        </nav>

        {/* Заголовок и статистика */}
        <div className="bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-3xl font-bold text-gray-900">
                  Автомобили по артикулу {cleanPartNumber}
                </h1>
                <p className="text-lg text-gray-600 mt-2">
                  Найдено {result.totalVehicles} автомобилей в {result.catalogs.length} каталогах
                </p>
              </div>
              
              {/* Фильтр по каталогам */}
              {result.catalogs.length > 1 && (
                <div className="flex items-center space-x-4">
                  <label className="text-sm font-medium text-gray-700">Каталог:</label>
                  <select
                    value={selectedCatalog}
                    onChange={(e) => setSelectedCatalog(e.target.value)}
                    className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500"
                  >
                    <option value="all">Все каталоги ({result.totalVehicles})</option>
                    {result.catalogs.map((catalog) => (
                      <option key={catalog.catalogCode} value={catalog.catalogCode}>
                        {catalog.brand} ({catalog.vehicleCount})
                      </option>
                    ))}
                  </select>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Список автомобилей */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="space-y-6">
            {filteredCatalogs.map((catalog) => (
              <div key={catalog.catalogCode} className="bg-white rounded-lg shadow-sm border">
                {/* Заголовок каталога */}
                <div className="px-6 py-4 border-b bg-gray-50">
                  <div className="flex items-center justify-between">
                    <h2 className="text-xl font-semibold text-gray-900">
                      {catalog.brand}
                    </h2>
                    <span className="text-sm text-gray-600">
                      {catalog.vehicleCount} автомобилей
                    </span>
                  </div>
                </div>

                {/* Список автомобилей в каталоге */}
                <div className="divide-y divide-gray-200">
                  {catalog.vehicles.map((vehicle, index) => (
                    <div
                      key={`${vehicle.vehicleid}-${index}`}
                      className="p-6 hover:bg-gray-50 transition-colors cursor-pointer"
                      onClick={() => handleVehicleSelect(vehicle)}
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center space-x-3 mb-2">
                            <h3 className="text-lg font-medium text-gray-900">
                              {vehicle.name || `${vehicle.brand} ${vehicle.model || 'Vehicle'}`}
                            </h3>
                            {vehicle.year && (
                              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                {vehicle.year}
                              </span>
                            )}
                          </div>
                          
                          <div className="space-y-1">
                            {vehicle.modification && (
                              <p className="text-sm text-gray-600">
                                <span className="font-medium">Модификация:</span> {vehicle.modification}
                              </p>
                            )}
                            {vehicle.engine && (
                              <p className="text-sm text-gray-600">
                                <span className="font-medium">Двигатель:</span> {vehicle.engine}
                              </p>
                            )}
                            {vehicle.bodytype && (
                              <p className="text-sm text-gray-600">
                                <span className="font-medium">Кузов:</span> {vehicle.bodytype}
                              </p>
                            )}
                            {(vehicle as any).transmission && (
                              <p className="text-sm text-gray-600">
                                <span className="font-medium">КПП:</span> {(vehicle as any).transmission}
                              </p>
                            )}
                          </div>
                        </div>
                        
                        <div className="flex items-center space-x-4">
                          <div className="text-right">
                            <button className="text-red-600 hover:text-red-700 font-medium text-sm">
                              Выбрать автомобиль
                            </button>
                          </div>
                          <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                          </svg>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Пустое состояние */}
          {filteredCatalogs.length === 0 && (
            <div className="bg-white rounded-lg shadow-sm border p-12 text-center">
              <div className="text-gray-400 mb-4">
                <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.29-1.009-5.824-2.562M15 6.306a7.962 7.962 0 00-6 0m6 0V3a1 1 0 00-1-1H8a1 1 0 00-1 1v3.306" />
                </svg>
              </div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">
                Автомобили не найдены
              </h3>
              <p className="text-gray-600">
                В выбранном каталоге нет автомобилей с артикулом {partNumber}
              </p>
            </div>
          )}
        </div>
      </main>

      <Footer />
    </>
  );
};

export default VehiclesByPartPage;