/**
 * ProductCard – one product tile (primitive)
 *
 * Without displayConfig: renders the original minimal layout (image, title, price).
 * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
 */
import React, { useMemo } from 'react';
import { clsx } from 'clsx';
import { ImageDisplay } from '../primitives/ImageDisplay';
import { extractBadges, getPriceRange, findVariantBySelections } from '../suggestions/utils';
const TRANSITIONS = {
    fast: '150ms ease-in-out',
    normal: '200ms ease-in-out',
    slow: '300ms ease-in-out',
};
const BORDER_RADIUS = {
    sm: 4,
    md: 6,
    lg: 8,
    full: 9999,
};
import { MinimalLayout, StandardLayout, DetailedLayout, CompactLayout, HorizontalLayout, } from './ProductCardLayouts';
const cardStyle = {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    padding: 8,
    cursor: 'pointer',
    border: 'none',
    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
    backgroundColor: 'transparent',
    textAlign: 'left',
    transition: `background-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
};
const imgStyle = {
    width: '100%',
    aspectRatio: '1',
    objectFit: 'cover',
    borderRadius: BORDER_RADIUS.sm,
    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
};
export function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'inline', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
    // Find selected variant if selections are provided
    const selectedVariant = useMemo(() => {
        if (!selectedVariants || !product.options || !product.variants)
            return null;
        return findVariantBySelections(product.options, product.variants, selectedVariants);
    }, [selectedVariants, product.options, product.variants]);
    // Compute effective display data (use selected variant if available, otherwise product defaults)
    const effectiveImages = useMemo(() => {
        // Priority: selected variant image > product images > product image
        if (selectedVariant?.image)
            return [selectedVariant.image];
        if (product.images?.length)
            return product.images;
        if (product.image ?? product.imageUrl)
            return [String(product.image ?? product.imageUrl)];
        return [];
    }, [selectedVariant, product]);
    const effectiveTitle = useMemo(() => {
        // Show variant title if available (e.g., "T-Shirt - Black / M")
        if (selectedVariant?.title && selectedVariant.title !== product.title) {
            return `${product.title ?? product.name ?? ''} - ${selectedVariant.title}`;
        }
        return product.title ?? product.name ?? '';
    }, [selectedVariant, product]);
    const effectivePrice = useMemo(() => {
        const variantPrice = selectedVariant?.price;
        if (variantPrice != null)
            return typeof variantPrice === 'number' ? variantPrice : Number(variantPrice);
        const productPrice = product.price;
        return productPrice != null ? (typeof productPrice === 'number' ? productPrice : Number(productPrice)) : null;
    }, [selectedVariant, product.price]);
    const effectiveComparePrice = useMemo(() => {
        const variantCompare = selectedVariant?.comparePrice;
        if (variantCompare != null)
            return typeof variantCompare === 'number' ? variantCompare : Number(variantCompare);
        const productCompare = product.original_price ?? product.compare_at_price;
        return productCompare != null ? (typeof productCompare === 'number' ? productCompare : Number(productCompare)) : null;
    }, [selectedVariant, product]);
    // Legacy vars for backwards compat
    const images = effectiveImages;
    const title = effectiveTitle;
    const price = effectivePrice;
    // Hover state for card
    const [isHovered, setIsHovered] = React.useState(false);
    const cardHoverStyle = isHovered
        ? {
            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
            boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
        }
        : {};
    // If no displayConfig, render original minimal layout (backwards compat)
    if (!displayConfig) {
        return (React.createElement("div", { role: "button", tabIndex: 0, className: clsx('seekora-suggestions-product-card', isHovered && 'seekora-suggestions-product-card--hover', className), style: { ...cardStyle, ...cardHoverStyle, ...style }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(), onKeyDown: (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    onSelect();
                }
            }, "data-position": position, "data-section": section, "data-tab-id": tabId },
            images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: title, className: "seekora-suggestions-product-card-image", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel })) : (React.createElement("div", { className: "seekora-suggestions-product-card-placeholder", style: imgStyle, "aria-hidden": true })),
            React.createElement("span", { className: "seekora-suggestions-product-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
            price != null && !Number.isNaN(price) ? (React.createElement("span", { className: "seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'inherit', opacity: 0.6 } },
                product.currency ?? '$',
                price.toFixed(2))) : null));
    }
    // Enhanced layout with displayConfig
    const layoutStyle = displayConfig.style ?? 'minimal';
    const comparePrice = effectiveComparePrice;
    const brand = product.brand ?? null;
    const options = product.options ?? [];
    const variants = product.variants ?? [];
    const badges = useMemo(() => {
        if (displayConfig.showBadges === false)
            return [];
        if (displayConfig.badgeExtractor)
            return displayConfig.badgeExtractor(product.tags, product);
        return extractBadges(product.tags, product);
    }, [displayConfig, product]);
    const priceRange = useMemo(() => {
        if (!displayConfig.showPriceRange)
            return null;
        return getPriceRange(product.variants);
    }, [displayConfig.showPriceRange, product.variants]);
    const layoutProps = {
        product,
        images,
        title,
        price,
        comparePrice,
        brand,
        badges,
        priceRange,
        options,
        variants,
        displayConfig,
        imageVariant,
        onVariantHover,
        onVariantClick,
        selectedVariants,
        actionButtons,
        actionButtonsPosition,
        showActionLabels,
        enableImageZoom,
        imageZoomMode,
        imageZoomLevel,
    };
    const layoutMap = {
        minimal: MinimalLayout,
        standard: StandardLayout,
        detailed: DetailedLayout,
        compact: CompactLayout,
        horizontal: HorizontalLayout,
    };
    const LayoutComponent = layoutMap[layoutStyle] ?? MinimalLayout;
    const rootClassName = clsx('seekora-product-card', `seekora-product-card--${layoutStyle}`, 'seekora-suggestions-product-card', isHovered && 'seekora-product-card--hover', className);
    const rootStyle = {
        ...cardStyle,
        ...(layoutStyle === 'horizontal' ? { flexDirection: 'row' } : {}),
        ...cardHoverStyle,
        ...style,
    };
    if (asLink && product.url) {
        return (React.createElement("a", { href: product.url, className: rootClassName, style: { ...rootStyle, textDecoration: 'none', color: 'inherit' }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
                e.preventDefault();
                onSelect();
            }, "data-position": position, "data-section": section, "data-tab-id": tabId },
            React.createElement(LayoutComponent, { ...layoutProps })));
    }
    return (React.createElement("div", { role: "button", tabIndex: 0, className: rootClassName, style: rootStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(), onKeyDown: (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onSelect();
            }
        }, "data-position": position, "data-section": section, "data-tab-id": tabId },
        React.createElement(LayoutComponent, { ...layoutProps })));
}
