import React, { useState } from "react";
import { useRouter } from "next/router";

interface KnotPartsProps {
  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 }>;
  }>;
  selectedCodeOnImage?: string | number;
  catalogCode?: string;
  vehicleId?: string;
}

const KnotParts: React.FC<KnotPartsProps> = ({ parts = [], selectedCodeOnImage, catalogCode, vehicleId }) => {
  const router = useRouter();

  const handlePriceClick = (part: any) => {
    if (part.oem && catalogCode && vehicleId !== undefined) {
      // Переходим на страницу выбора бренда
      const url = `/vehicle-search/${catalogCode}/${vehicleId}/part/${part.oem}/brands?detailName=${encodeURIComponent(part.name || '')}`;
      router.push(url);
    }
  };

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

  return (
    <>
      <div className="knot-parts">
        {parts.map((part, idx) => {
          const isSelected = part.codeonimage && part.codeonimage === selectedCodeOnImage;
          return (
            <div
              className={`w-layout-hflex knotlistitem border rounded transition-colors duration-150 ${isSelected ? 'bg-yellow-100 border-yellow-400' : 'border-transparent'}`}
              key={part.detailid || idx}
            >
              <div className="w-layout-hflex flex-block-116">
                <div className="nuberlist">{part.codeonimage || idx + 1}</div>
                <div className="oemnuber">{part.oem}</div>
              </div>
              <div className="partsname">{part.name}</div>
              <div className="w-layout-hflex flex-block-117">
                <button
                  className="button-3 w-button"
                  onClick={() => handlePriceClick(part)}
                >
                  Цена
                </button>
                <div className="code-embed-16 w-embed">
                  <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
                  </svg>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default KnotParts;