'use client';

import { precioProducto } from '@/lib/precioProducto';
import Tooltip from '@mui/material/Tooltip';
import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded';
import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded';
import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
import StarRoundedIcon from '@mui/icons-material/StarRounded';
import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
import type { Product } from '../../config/defaultStoreConfig';
import {
	ShowcaseProductCard,
	ShowcaseProductImage,
	ShowcaseBadge,
	ShowcaseActionRail,
	ShowcaseActionButton,
	ShowcaseProductInfo,
	ReviewRating,
	ShowcaseMeta,
	PriceRow
} from '../styles';
import { storeImageSrc } from '@/lib/storeImage';

interface Props {
	product: Product;
	showPromotionBadge: boolean;
	// Los mismos toggles del catálogo que respeta la grilla. Antes las tarjetas de los
	// carruseles de la portada los ignoraban: apagar «Mostrar marca» no cambiaba nada ahí.
	showBrand?: boolean;
	showStock?: boolean;
	showCategory?: boolean;
	formatPrice: (value: number) => string;
	onOpenDetail: (product: Product) => void;
	onAddToCart: (product: Product) => void;
	onQuickView: (product: Product) => void;
	isFavorite?: boolean;
	onToggleWishlist?: (productId: string) => void;
}

export default function StoreShowcaseCard({
	product,
	showPromotionBadge,
	showBrand = false,
	showStock = false,
	showCategory = false,
	formatPrice,
	onOpenDetail,
	onAddToCart,
	onQuickView,
	isFavorite = false,
	onToggleWishlist,
}: Props) {
	return (
		<ShowcaseProductCard
			role="button"
			tabIndex={0}
			onClick={() => onOpenDetail(product)}
			onKeyDown={(event) => {
				if (event.key === 'Enter' || event.key === ' ') {
					event.preventDefault();
					onOpenDetail(product);
				}
			}}
		>
			<ShowcaseProductImage>
				<img
					src={storeImageSrc(product.image, product.name)}
					alt={product.name}
				/>
				{showPromotionBadge && product.badges[0] && <ShowcaseBadge>{product.badges[0]}</ShowcaseBadge>}
			</ShowcaseProductImage>
			<ShowcaseActionRail>
				<Tooltip
					title="Agregar al carrito"
					placement="left"
					arrow
				>
					<ShowcaseActionButton
						aria-label={`Agregar ${product.name} al carrito`}
						data-action="cart"
						onClick={(event) => {
							event.stopPropagation();
							onAddToCart(product);
						}}
					>
						<ShoppingCartRoundedIcon fontSize="small" />
					</ShowcaseActionButton>
				</Tooltip>
				<Tooltip
					title={isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos'}
					placement="left"
					arrow
				>
					<ShowcaseActionButton
						aria-label={isFavorite ? `Quitar ${product.name} de favoritos` : `Agregar ${product.name} a favoritos`}
						data-action="favorite"
						onClick={(event) => { event.stopPropagation(); onToggleWishlist?.(product.id); }}
					>
						{isFavorite
							? <FavoriteRoundedIcon fontSize="small" />
							: <FavoriteBorderRoundedIcon fontSize="small" />}
					</ShowcaseActionButton>
				</Tooltip>
				{/* Comparar: oculto hasta la próxima etapa (falta implementar la comparación de productos) */}
				<Tooltip
					title="Vista rápida"
					placement="left"
					arrow
				>
					<ShowcaseActionButton
						aria-label={`Vista rápida de ${product.name}`}
						data-action="view"
						onClick={(event) => {
							event.stopPropagation();
							onQuickView(product);
						}}
					>
						<VisibilityRoundedIcon fontSize="small" />
					</ShowcaseActionButton>
				</Tooltip>
			</ShowcaseActionRail>
			<ShowcaseProductInfo>
				{(product.reviewCount ?? 0) > 0 && (
					<ReviewRating>
						<StarRoundedIcon fontSize="small" />
						{product.rating} ({product.reviewCount})
					</ReviewRating>
				)}
				{(() => {
					const rubro = [showBrand ? product.brand : '', showCategory ? product.category : ''].filter(Boolean).join(' · ');
					return rubro || showStock ? (
						<ShowcaseMeta>
							<span>{rubro}</span>
							{showStock && <em>En stock</em>}
						</ShowcaseMeta>
					) : null;
				})()}
				<strong>{product.name}</strong>
				<PriceRow>
					<strong>{precioProducto(product.price, formatPrice)}</strong>
					{product.oldPrice && <del>{formatPrice(product.oldPrice)}</del>}
				</PriceRow>
			</ShowcaseProductInfo>
		</ShowcaseProductCard>
	);
}