import React, { useState } from 'react';
import { useQuery } from '@apollo/client';
import { useRouter } from 'next/router';
import { GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo';

interface VinQuickProps {
  quickGroup: any;
  catalogCode: string;
  vehicleId: string;
  ssd: string;
  onBack: () => void;
  onNodeSelect: (unit: any) => void;
}

const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId, ssd, onBack, onNodeSelect }) => {
  const router = useRouter();
  
  const { data, loading, error } = useQuery(GET_LAXIMO_QUICK_DETAIL, {
    variables: {
      catalogCode,
      vehicleId,
      quickGroupId: quickGroup.quickgroupid,
      ssd
    },
    skip: !quickGroup || !quickGroup.quickgroupid
  });
  const quickDetail = data?.laximoQuickDetail;

  const handleUnitClick = (unit: any) => {
    onNodeSelect({
      ...unit,
      unitid: unit.unitid,
      name: unit.name,
      catalogCode,
      vehicleId,
      ssd: unit.ssd || ssd  // Используем SSD узла, а не родительский
    });
  };
  
  const handleDetailClick = (detail: any) => {
    if (detail.oem) {
      // Переходим на страницу выбора бренда
      const url = `/vehicle-search/${catalogCode}/${vehicleId}/part/${detail.oem}/brands?detailName=${encodeURIComponent(detail.name || '')}`;
      router.push(url);
    }
  };

  return (
    <div className="w-full">
      {/* <button onClick={onBack} className="mb-4 px-4 py-2 bg-gray-200 rounded self-start">Назад</button> */}
      {loading ? (
        <div className="text-center py-4">Загружаем детали...</div>
      ) : error ? (
        <div className="text-red-600 py-4">Ошибка загрузки деталей: {error.message}</div>
      ) : quickDetail && quickDetail.units ? (
        quickDetail.units.map((unit: any) => (
          <div key={unit.unitid} className="w-layout-vflex flex-block-14-copy-copy">
            <div className="knotinfo">
              {unit.imageurl || unit.largeimageurl ? (
                <img
                  src={unit.largeimageurl ? unit.largeimageurl.replace('%size%', '250') : unit.imageurl.replace('%size%', '250')}
                  alt={unit.name}
                  className="image-26"
                  onError={e => { (e.currentTarget as HTMLImageElement).src = '/images/image-44.jpg'; }}
                  onClick={() => handleUnitClick(unit)}
                  style={{ cursor: 'pointer' }}
                />
              ) : (
                <img src="/images/image-44.jpg" alt="Нет изображения" className="image-26" />
              )}
            </div>
            <div className="knot-img">
              <h1 className="heading-19">{unit.name}</h1>
              
                {unit.details && unit.details.length > 0 && unit.details.map((detail: any, index: number) => (
                  <div className="w-layout-hflex flex-block-115" key={`${unit.unitid}-${detail.detailid || index}`}>
                    <div className="oemnuber">{detail.oem}</div>
                    <div className="partsname">{detail.name}</div>
                    <a href="#" className="button-3 w-button" onClick={e => { e.preventDefault(); handleDetailClick(detail); }}>Показать цены</a>
                  </div>
                ))}
        
              <a href="#" className="showallparts w-button" onClick={e => { e.preventDefault(); handleUnitClick(unit); }}>Подробнее</a>
            </div>
          </div>
        ))
      ) : (
        <div className="text-center text-gray-500 py-4">Нет деталей для этой группы</div>
      )}
    </div>
  );
};

export default VinQuick;