'use client';

import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded';
import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
import type { Product } from '../../config/defaultStoreConfig';
import {
	SectionBackBtn,
	AddToCartBtn,
	CatalogBtn,
	RemoveHeart,
	WishlistEmpty,
	WishlistGrid,
	WishlistHeader,
	WishlistItemBody,
	WishlistItemCard,
	WishlistItemImage,
	WishlistWrap,
} from './styles';
import { storeImageSrc } from '@/lib/storeImage';

type Props = {
	products: Product[];
	wishlistIds: Set<string>;
	formatPrice: (value: number) => string;
	showBrand: boolean;
	onToggleWishlist: (id: string) => void;
	onOpenDetail: (product: Product) => void;
	onAddToCart: (product: Product) => void;
	onClose: () => void;
	onGoToCatalog: () => void;
};

export default function WishlistSection({
	products,
	wishlistIds,
	formatPrice,
	showBrand,
	onToggleWishlist,
	onOpenDetail,
	onAddToCart,
	onClose,
	onGoToCatalog,
}: Props) {
	const wishlistProducts = products.filter((p) => wishlistIds.has(p.id));

	return (
		<WishlistWrap>
			<div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
				<SectionBackBtn type="button" onClick={onClose}>
					<ArrowBackRoundedIcon fontSize="small" />
					Volver
				</SectionBackBtn>
				<WishlistHeader>
					<h2>Lista de deseos</h2>
					{wishlistProducts.length > 0 && (
						<span>{wishlistProducts.length} producto{wishlistProducts.length !== 1 ? 's' : ''}</span>
					)}
				</WishlistHeader>
			</div>

			{wishlistProducts.length === 0 ? (
				<WishlistEmpty>
					<FavoriteRoundedIcon />
					<h3>Tu lista de deseos está vacía</h3>
					<p>Guardá los productos que te interesan tocando el corazón ❤️ en cada producto.</p>
					<CatalogBtn type="button" onClick={onGoToCatalog}>
						Ver catálogo
					</CatalogBtn>
				</WishlistEmpty>
			) : (
				<WishlistGrid>
					{wishlistProducts.map((product) => (
						<WishlistItemCard key={product.id}>
							<WishlistItemImage
								type="button"
								aria-label={`Ver ${product.name}`}
								onClick={() => onOpenDetail(product)}
							>
								<img src={storeImageSrc(product.image, product.name)} alt={product.name} />
							</WishlistItemImage>

							<RemoveHeart
								type="button"
								aria-label={`Quitar ${product.name} de favoritos`}
								onClick={() => onToggleWishlist(product.id)}
							>
								<FavoriteRoundedIcon style={{ fontSize: 17 }} />
							</RemoveHeart>

							<WishlistItemBody>
								{showBrand && <span className="brand">{product.brand}</span>}
								<span className="name">{product.name}</span>
								<span className="price">{formatPrice(product.price)}</span>
							</WishlistItemBody>

							<AddToCartBtn
								type="button"
								onClick={() => onAddToCart(product)}
							>
								<ShoppingCartRoundedIcon style={{ fontSize: 16 }} />
								Agregar al carrito
							</AddToCartBtn>
						</WishlistItemCard>
					))}
				</WishlistGrid>
			)}
		</WishlistWrap>
	);
}