'use client';

import { precioProducto } from '@/lib/precioProducto';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
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 {
	ProductCard,
	ProductImage,
	BadgeStack,
	ProductBody,
	ProductMeta,
	Rating,
	PriceRow,
	CardInstallments,
	CardFooter,
	StockText,
	ProductActions,
	IconAction,
	PrimaryIconAction
} from '../styles';
import { storeImageSrc } from '@/lib/storeImage';

interface Props {
	product: Product;
	showBrand: boolean;
	showStock: boolean;
	/** «Mostrar categoría» del catálogo: rubro del producto junto a la marca. */
	showCategory?: boolean;
	showPromotionBadge: boolean;
	isFavorite?: boolean;
	formatPrice: (value: number) => string;
	onOpenDetail: (product: Product) => void;
	onAddToCart: (product: Product) => void;
	onQuickView: (product: Product) => void;
	onToggleWishlist?: (productId: string) => void;
}

export default function StoreProductCard({
	product,
	showBrand,
	showStock,
	showCategory = false,
	showPromotionBadge,
	isFavorite = false,
	formatPrice,
	onOpenDetail,
	onAddToCart,
	onQuickView,
	onToggleWishlist,
}: Props) {
	return (
		<ProductCard
			role="button"
			tabIndex={0}
			onClick={() => onOpenDetail(product)}
			onKeyDown={(event) => {
				if (event.key === 'Enter' || event.key === ' ') {
					event.preventDefault();
					onOpenDetail(product);
				}
			}}
		>
			<ProductImage>
				<img
					src={storeImageSrc(product.image, product.name)}
					alt={product.name}
				/>
				<BadgeStack>
					{showPromotionBadge && product.badges.slice(0, 2).map((badge) => <span key={badge}>{badge}</span>)}
				</BadgeStack>
			</ProductImage>
			<ProductBody>
				<ProductMeta>
					{(showBrand || showCategory) && (
						<span>{[showBrand ? product.brand : '', showCategory ? product.category : ''].filter(Boolean).join(' · ')}</span>
					)}
					{(product.reviewCount ?? 0) > 0 && (
						<Rating title={`${product.reviewCount} reseña${product.reviewCount === 1 ? '' : 's'}`}>
							<StarRoundedIcon fontSize="inherit" />
							{product.rating} ({product.reviewCount})
						</Rating>
					)}
				</ProductMeta>
				<Typography
					component="h3"
					variant="subtitle1"
				>
					{product.name}
				</Typography>
				<PriceRow>
					{/* Padre de variantes: el precio es el de la combinación más barata. */}
					<strong>
						{product.hasVariants ? 'Desde ' : ''}
						{precioProducto(product.price, formatPrice)}
					</strong>
					{product.oldPrice && <del>{formatPrice(product.oldPrice)}</del>}
				</PriceRow>
				{product.installmentSummary && product.installmentSummary.maxInstallments > 0 && (
					<CardInstallments>
						Hasta <strong>{product.installmentSummary.maxInstallments} cuotas</strong> de{' '}
						{formatPrice(product.installmentSummary.minInstallmentAmount)}
					</CardInstallments>
				)}
				<CardFooter>
					{showStock && <StockText>En stock</StockText>}
					<ProductActions>
						<Tooltip
							title={product.hasVariants ? 'Elegí color/talle en la ficha' : 'Agregar al carrito'}
							arrow
							enterDelay={250}
						>
							<PrimaryIconAction
								aria-label={`Agregar ${product.name} al carrito`}
								onClick={(event) => {
									event.stopPropagation();
									onAddToCart(product);
								}}
							>
								<ShoppingCartRoundedIcon fontSize="small" />
							</PrimaryIconAction>
						</Tooltip>
						<Tooltip
							title="Ver detalle"
							arrow
							enterDelay={250}
						>
							<IconAction
								aria-label={`Ver detalle de ${product.name}`}
								data-action="view"
								onClick={(event) => {
									event.stopPropagation();
									onQuickView(product);
								}}
							>
								<VisibilityRoundedIcon fontSize="small" />
							</IconAction>
						</Tooltip>
						<Tooltip
							title={isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos'}
							arrow
							enterDelay={250}
						>
							<IconAction
								aria-label={isFavorite ? `Quitar ${product.name} de favoritos` : `Agregar ${product.name} a favoritos`}
								data-action="favorite"
								onClick={(event) => { event.stopPropagation(); onToggleWishlist?.(product.id); }}
								style={isFavorite ? { color: 'var(--store-danger)' } : undefined}
							>
								{isFavorite ? (
									<FavoriteRoundedIcon fontSize="small" />
								) : (
									<FavoriteBorderRoundedIcon fontSize="small" />
								)}
							</IconAction>
						</Tooltip>
						{/* Comparar: oculto hasta la próxima etapa (falta implementar la comparación de productos) */}
					</ProductActions>
				</CardFooter>
			</ProductBody>
		</ProductCard>
	);
}