import React, { useRef, useState } from "react";
import { useQuery } from '@apollo/client';
import { useRouter } from 'next/router';
import { GET_LAXIMO_UNIT_INFO, GET_LAXIMO_UNIT_IMAGE_MAP } from '@/lib/graphql';
import BrandSelectionModal from '../BrandSelectionModal';

interface KnotInProps {
  catalogCode?: string;
  vehicleId?: string;
  ssd?: string;
  unitId?: string;
  unitName?: string;
  parts?: Array<{
    detailid?: string;
    codeonimage?: string | number;
    oem?: string;
    name?: string;
    price?: string | number;
    brand?: string;
    availability?: string;
    note?: string;
    attributes?: Array<{ key: string; name?: string; value: string }>;
  }>;
}

// Функция для корректного формирования URL изображения
const getImageUrl = (baseUrl: string, size: string) => {
  if (!baseUrl) return '';
  return baseUrl
    .replace(/&amp;/g, '&')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&quot;/g, '"')
    .replace('%size%', size);
};

const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, unitName, parts }) => {
  const imgRef = useRef<HTMLImageElement>(null);
  const [imageScale, setImageScale] = useState({ x: 1, y: 1 });
  const selectedImageSize = 'source';
  const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
  const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
  const router = useRouter();

  // Получаем инфо об узле (для картинки)
  const { data: unitInfoData, loading: unitInfoLoading, error: unitInfoError } = useQuery(
    GET_LAXIMO_UNIT_INFO,
    {
      variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', unitId: unitId || '', ssd: ssd || '' },
      skip: !catalogCode || !vehicleId || !unitId,
      errorPolicy: 'all',
    }
  );
  // Получаем карту координат
  const { data: imageMapData, loading: imageMapLoading, error: imageMapError } = useQuery(
    GET_LAXIMO_UNIT_IMAGE_MAP,
    {
      variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', unitId: unitId || '', ssd: ssd || '' },
      skip: !catalogCode || !vehicleId || !unitId,
      errorPolicy: 'all',
    }
  );

  // Если нет необходимых данных, показываем заглушку
  if (!catalogCode || !vehicleId || !unitId) {
    return (
      <div className="text-center py-8 text-gray-500">
        <div className="text-lg font-medium mb-2">Схема узла</div>
        <div className="text-sm">Выберите узел для отображения схемы</div>
      </div>
    );
  }

  const unitInfo = unitInfoData?.laximoUnitInfo;
  const coordinates = imageMapData?.laximoUnitImageMap?.coordinates || [];
  const imageUrl = unitInfo?.imageurl ? getImageUrl(unitInfo.imageurl, selectedImageSize) : '';

  // Масштабируем точки после загрузки картинки
  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
    const img = e.currentTarget;
    if (!img.naturalWidth || !img.naturalHeight) return;
    setImageScale({
      x: img.offsetWidth / img.naturalWidth,
      y: img.offsetHeight / img.naturalHeight,
    });
  };

  // Клик по точке: найти part по codeonimage/detailid и открыть BrandSelectionModal
  const handlePointClick = (codeonimage: string | number) => {
    if (!parts) return;
    console.log('Клик по точке:', codeonimage, 'Все детали:', parts);
    const part = parts.find(
      (p) =>
        (p.codeonimage && p.codeonimage.toString() === codeonimage.toString()) ||
        (p.detailid && p.detailid.toString() === codeonimage.toString())
    );
    console.log('Найдена деталь для точки:', part);
    if (part?.oem) {
      setSelectedDetail({ oem: part.oem, name: part.name || '' });
      setIsBrandModalOpen(true);
    } else {
      console.warn('Нет артикула (oem) для выбранной точки:', codeonimage, part);
    }
  };

  // Для отладки: вывести детали и координаты
  React.useEffect(() => {
    console.log('KnotIn parts:', parts);
    console.log('KnotIn coordinates:', coordinates);
  }, [parts, coordinates]);

  if (unitInfoLoading || imageMapLoading) {
    return <div className="text-center py-8 text-gray-500">Загружаем схему узла...</div>;
  }
  if (unitInfoError) {
    return <div className="text-center py-8 text-red-600">Ошибка загрузки схемы: {unitInfoError.message}</div>;
  }
  if (!imageUrl) {
    return <div className="text-center py-8 text-gray-400">Нет изображения для этого узла</div>;
  }

  return (
    <>
      <div className="relative inline-block">
        {/* ВРЕМЕННО: выводим количество точек для быстрой проверки */}
        <div style={{ position: 'absolute', top: 4, left: 4, zIndex: 20, background: 'rgba(255,0,0,0.1)', color: '#c00', fontWeight: 700, fontSize: 14, padding: '2px 8px', borderRadius: 6 }}>
          {coordinates.length} точек
        </div>
        <img
          ref={imgRef}
          src={imageUrl}
          loading="lazy"
          alt={unitName || unitInfo?.name || "Изображение узла"}
          onLoad={handleImageLoad}
          className="max-w-full h-auto mx-auto rounded"
          style={{ maxWidth: 400, display: 'block' }}
        />
        {/* Точки/области */}
        {coordinates.map((coord: any, idx: number) => {
          const scaledX = coord.x * imageScale.x;
          const scaledY = coord.y * imageScale.y;
          const scaledWidth = coord.width * imageScale.x;
          const scaledHeight = coord.height * imageScale.y;
          return (
            <div
              key={`coord-${unitId}-${idx}-${coord.x}-${coord.y}`}
              tabIndex={0}
              aria-label={`Деталь ${coord.codeonimage}`}
              onKeyDown={e => {
                if (e.key === 'Enter' || e.key === ' ') handlePointClick(coord.codeonimage);
              }}
              className="absolute flex items-center justify-center border-2 border-red-600 bg-white rounded-full cursor-pointer"
              style={{
                left: scaledX,
                top: scaledY,
                width: scaledWidth,
                height: scaledHeight,
                borderRadius: '50%',
                pointerEvents: 'auto',
              }}
              title={coord.codeonimage}
              onClick={() => handlePointClick(coord.codeonimage)}
            >
              <span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none">
                {coord.codeonimage}
              </span>
            </div>
          );
        })}
    </div>
      {/* Модалка выбора бренда */}
      <BrandSelectionModal
        isOpen={isBrandModalOpen}
        onClose={() => setIsBrandModalOpen(false)}
        articleNumber={selectedDetail?.oem || ''}
        detailName={selectedDetail?.name || ''}
      />
    </>
  );
};

export default KnotIn; 