import React from "react";
import CartItem from "./CartItem";
import { useCart } from "@/contexts/CartContext";
import { useFavorites } from "@/contexts/FavoritesContext";

const CartList: React.FC = () => {
  const { state, toggleSelect, updateComment, removeItem, selectAll, removeSelected, updateQuantity } = useCart();
  const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
  const { items } = state;

  const allSelected = items.length > 0 && items.every((item) => item.selected);

  const handleSelectAll = () => {
    selectAll();
  };

  const handleRemoveSelected = () => {
    removeSelected();
  };

  const handleSelect = (id: string) => {
    toggleSelect(id);
  };

  const handleFavorite = (id: string) => {
    const item = items.find(item => item.id === id);
    if (!item) return;

    const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);

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

  const handleComment = (id: string, comment: string) => {
    updateComment(id, comment);
  };

  const handleRemove = (id: string) => {
    removeItem(id);
  };

  const handleCountChange = (id: string, count: number) => {
    updateQuantity(id, count);
  };

  // Функция для форматирования цены
  const formatPrice = (price: number, currency: string = 'RUB') => {
    return `${price.toLocaleString('ru-RU')} ${currency === 'RUB' ? '₽' : currency}`;
  };

  return (
    <div className="w-layout-vflex flex-block-48">
      <div className="w-layout-vflex product-list-cart">
        <div className="w-layout-hflex multi-control">
          <div className="w-layout-hflex select-all-block" onClick={handleSelectAll} style={{ cursor: 'pointer' }}>
            <div
              className={"div-block-7" + (allSelected ? " active" : "")}
              style={{ marginRight: 8, cursor: 'pointer' }}
            >
              {allSelected && (
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
                  <path d="M2 5.5L6 9L12 2" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
            </div>
            <div className="text-block-30">Выделить всё</div>
          </div>
          <div className="w-layout-hflex select-all-block" onClick={handleRemoveSelected} style={{ cursor: 'pointer' }}
            onMouseEnter={e => {
              const path = (e.currentTarget.querySelector('path'));
              if (path) path.setAttribute('fill', '#ec1c24');
            }}
            onMouseLeave={e => {
              const path = (e.currentTarget.querySelector('path'));
              if (path) path.setAttribute('fill', '#D0D0D0');
            }}
          >
            <div className="text-block-30">Удалить выбранные</div>
            <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg" className="image-13">
              <path
                d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
                fill="#D0D0D0"
                style={{ transition: 'fill 0.2s' }}
              />
            </svg>
          </div>
        </div>
        {items.length === 0 ? (
          <div className="empty-cart-message" style={{ textAlign: 'center', padding: '2rem', color: '#666' }}>
            <p>Ваша корзина пуста</p>
            <p>Добавьте товары из каталога</p>
          </div>
        ) : (
          items.map((item) => {
            const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);
            
            return (
              <div className="div-block-21" key={item.id}>
                <CartItem
                  name={item.name}
                  description={item.description}
                  delivery={item.deliveryTime || 'Уточняется'}
                  deliveryDate={item.deliveryDate || ''}
                  price={formatPrice(item.price, item.currency)}
                  pricePerItem={`${formatPrice(item.price, item.currency)}/шт`}
                  count={item.quantity}
                  comment={item.comment || ''}
                  selected={item.selected}
                  favorite={isInFavorites}
                  onSelect={() => handleSelect(item.id)}
                  onFavorite={() => handleFavorite(item.id)}
                  onComment={(comment) => handleComment(item.id, comment)}
                  onCountChange={(count) => handleCountChange(item.id, count)}
                  onRemove={() => handleRemove(item.id)}
                />
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};

export default CartList;