protekauto-frontend/src/components/CartList.tsx

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

interface CartListProps {
  isSummaryStep?: boolean;
}

const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
  const { state, toggleSelect, updateComment, removeItem, selectAll, removeSelected, updateQuantity, clearError } = 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) {
      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}`;
  };

  // На втором шаге показываем только выбранные товары
  const displayItems = isSummaryStep ? items.filter(item => item.selected) : items;

  // Автоматически очищаем ошибки через 5 секунд
  useEffect(() => {
    if (state.error) {
      const timer = setTimeout(() => {
        clearError();
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [state.error, clearError]);

  return (
    <div className="w-layout-vflex flex-block-48">
      {/* Отображение ошибок корзины */}
      {state.error && (
        <div className="alert alert-error mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
              </svg>
              <span>{state.error}</span>
            </div>
            <button 
              onClick={clearError}
              className="ml-2 text-red-500 hover:text-red-700"
              aria-label="Закрыть уведомление"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
      )}
      <div className="w-layout-vflex product-list-cart">
        {!isSummaryStep && (
          <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>
        )}
        {displayItems.length === 0 ? (
          <div className="empty-cart-message" style={{ textAlign: 'center', padding: '2rem', color: '#666' }}>
            <p>Ваша корзина пуста</p>
            <p>Добавьте товары из каталога</p>
          </div>
        ) : (
          displayItems.map((item, idx) => {
            const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);
            return (
              <div
                className={
                  "div-block-21" +
                  (isSummaryStep && idx === 0 ? " border-t-0" : "")
                }
                style={
                  isSummaryStep && idx === 0
                    ? { borderTop: 'none' }
                    : undefined
                }
                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)}
                  isSummaryStep={isSummaryStep}
                  itemNumber={idx + 1}
                />
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};

export default CartList;