import React from "react";
import { useFavorites } from "@/contexts/FavoritesContext";

interface InfoCardProps {
  brand?: string;
  articleNumber?: string;
  name?: string;
  productId?: string;
  offerKey?: string;
  price?: number;
  currency?: string;
  image?: string;
}

export default function InfoCard({ 
  brand, 
  articleNumber, 
  name, 
  productId, 
  offerKey, 
  price = 0, 
  currency = 'RUB', 
  image 
}: InfoCardProps) {
  const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();

  // Проверяем, есть ли товар в избранном
  const isItemFavorite = isFavorite(productId, offerKey, articleNumber, brand);

  // Обработчик клика по сердечку
  const handleFavoriteClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    if (isItemFavorite) {
      // Находим товар в избранном по правильному ID
      const favoriteItem = favorites.find((fav: any) => {
        // Проверяем по разным комбинациям идентификаторов
        if (productId && fav.productId === productId) return true;
        if (offerKey && fav.offerKey === offerKey) return true;
        if (fav.article === articleNumber && fav.brand === brand) return true;
        return false;
      });
      
      if (favoriteItem) {
        removeFromFavorites(favoriteItem.id);
      }
    } else {
      // Добавляем в избранное
      addToFavorites({
        productId,
        offerKey,
        name: name || "Название товара",
        brand: brand || "БРЕНД",
        article: articleNumber || "АРТИКУЛ",
        price,
        currency,
        image
      });
    }
  };

  return (
    <section className="section-info">
      <div className="w-layout-blockcontainer container info w-container">
        <div className="w-layout-vflex flex-block-9">
          <div className="w-layout-hflex flex-block-7">
            <a href="/" className="link-block w-inline-block">
              <div>Главная</div>
            </a>
            <div className="text-block-3">→</div>
            <a href="/catalog" className="link-block w-inline-block">
              <div>Каталог</div>
            </a>
            <div className="text-block-3">→</div>
            <a href="#" className="link-block w-inline-block">
              <div>Автозапчасти</div>
            </a>
            <div className="text-block-3">→</div>
            <a href="#" className="link-block-2 w-inline-block">
              <div>{name || "Деталь"} </div>
            </a>
          </div>
          <div className="w-layout-hflex flex-block-bi">
            <div className="w-layout-hflex headingbi">
              <h1 className="heading-bi">{name || "Название товара"} {brand || "БРЕНД"}</h1>
              <div 
                className="div-block-127" 
                onClick={handleFavoriteClick}
                style={{ 
                  cursor: 'pointer',
                  transition: 'transform 0.2s ease',
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.1)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
              >
                <div className="icon-setting w-embed">
                  <svg width="currentwidth" height="currentheight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path 
                      d="M15 25L13.405 23.5613C7.74 18.4714 4 15.1035 4 10.9946C4 7.6267 6.662 5 10.05 5C11.964 5 13.801 5.88283 15 7.26703C16.199 5.88283 18.036 5 19.95 5C23.338 5 26 7.6267 26 10.9946C26 15.1035 22.26 18.4714 16.595 23.5613L15 25Z" 
                      fill={isItemFavorite ? "#e53935" : "currentColor"}
                      style={{ color: isItemFavorite ? "#e53935" : undefined }}
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div className="w-layout-hflex rightbi">
              <div className="text-block-5-copy">{brand || "БРЕНД"} <strong className="bold-text">{articleNumber || "АРТИКУЛ"}</strong></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}