/**
 * VariantSwatches – inline variant indicators for card display
 *
 * Shows color dots, size labels, and "+N more" overflow for compact card views.
 */
import React, { useState } from 'react';
import { clsx } from 'clsx';
import { useIsMobile } from '../../utils/responsive';
const COLOR_NAMES = {
    black: '#000', white: '#fff', red: '#ef4444', blue: '#3b82f6',
    green: '#22c55e', yellow: '#eab308', orange: '#f97316', purple: '#a855f7',
    pink: '#ec4899', brown: '#92400e', grey: '#6b7280', gray: '#6b7280',
    navy: '#1e3a5f', beige: '#d4c5a9', cream: '#fffdd0', ivory: '#fffff0',
    khaki: '#c3b091', olive: '#808000', teal: '#0d9488', coral: '#ff7f50',
    maroon: '#800000', tan: '#d2b48c', charcoal: '#36454f', burgundy: '#800020',
    sage: '#9caf88', lavender: '#e6e6fa', mint: '#98fb98', rust: '#b7410e',
    plum: '#8e4585', slate: '#708090', indigo: '#4b0082', gold: '#ffd700',
    silver: '#c0c0c0', rose: '#ff007f', mauve: '#e0b0ff', wine: '#722f37',
    raven: '#0a0a0a', natural: '#f5f0e1', bone: '#e3dac9', sand: '#c2b280',
};
const isColorOption = (name) => {
    const lower = name.toLowerCase();
    return lower === 'color' || lower === 'colour' || lower === 'colors' || lower === 'colours';
};
const resolveColor = (value, colorMap) => {
    if (colorMap?.[value])
        return colorMap[value];
    const lower = value.toLowerCase();
    if (colorMap?.[lower])
        return colorMap[lower];
    return COLOR_NAMES[lower] ?? null;
};
const getAvailability = (optionName, value, options, variants, selectedValues) => {
    if (!variants || variants.length === 0)
        return true;
    const optionIndex = options.findIndex((o) => o.name === optionName);
    if (optionIndex === -1)
        return true;
    const optionKey = `option${optionIndex + 1}`;
    return variants.some((variant) => {
        // Must match the current option value
        if (variant[optionKey] !== value)
            return false;
        // Must be available
        if (variant.available === false)
            return false;
        // Must match all other selected values
        if (selectedValues) {
            for (const [selName, selValue] of Object.entries(selectedValues)) {
                if (selName === optionName)
                    continue; // Skip current option
                const selIdx = options.findIndex((o) => o.name === selName);
                if (selIdx === -1)
                    continue;
                const selKey = `option${selIdx + 1}`;
                if (variant[selKey] !== selValue)
                    return false;
            }
        }
        return true;
    });
};
export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, selectedValues, variants, showAvailability = true, onSwatchHover, onSwatchClick, className, style, }) {
    const [expandedOptions, setExpandedOptions] = useState(new Set());
    const isMobile = useIsMobile();
    // Responsive sizing
    const colorSwatchSize = isMobile ? 20 : 14; // Larger on mobile for touch
    const textSwatchPadding = isMobile ? '4px 10px' : '1px 6px';
    const textSwatchFontSize = isMobile ? '0.75rem' : '0.6875rem';
    const gap = isMobile ? 6 : 4;
    if (!options || options.length === 0)
        return null;
    const filtered = visibleOptions
        ? options.filter((o) => visibleOptions.includes(o.name))
        : options;
    if (filtered.length === 0)
        return null;
    const toggleExpanded = (optionName, e) => {
        e.stopPropagation();
        setExpandedOptions((prev) => {
            const next = new Set(prev);
            if (next.has(optionName)) {
                next.delete(optionName);
            }
            else {
                next.add(optionName);
            }
            return next;
        });
    };
    return (React.createElement("div", { className: clsx('seekora-variant-swatches', className), style: { display: 'flex', flexDirection: 'column', gap, ...style } }, filtered.map((option) => {
        const isColor = isColorOption(option.name);
        const isExpanded = expandedOptions.has(option.name);
        const visible = isExpanded ? option.values : option.values.slice(0, maxValues);
        const overflow = option.values.length - maxValues;
        const hasOverflow = overflow > 0;
        const selectedValue = selectedValues?.[option.name];
        return (React.createElement("div", { key: option.name, className: "seekora-variant-swatch-group", style: { display: 'flex', alignItems: 'center', gap, flexWrap: 'wrap' } },
            visible.map((value) => {
                const color = isColor ? resolveColor(value, colorMap) : null;
                const isSelected = selectedValue === value;
                const isAvailable = showAvailability
                    ? getAvailability(option.name, value, options, variants, selectedValues)
                    : true;
                if (color) {
                    return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--color', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), title: `${value}${!isAvailable ? ' (Unavailable)' : ''}`, style: {
                            display: 'inline-flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: colorSwatchSize,
                            height: colorSwatchSize,
                            minWidth: colorSwatchSize,
                            minHeight: colorSwatchSize,
                            borderRadius: '50%',
                            backgroundColor: color,
                            border: isSelected
                                ? '2px solid var(--seekora-primary, #111827)'
                                : '1px solid var(--seekora-border-color, #e5e7eb)',
                            outline: isSelected ? '2px solid var(--seekora-primary, #111827)' : 'none',
                            outlineOffset: 2,
                            cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                            flexShrink: 0,
                            boxShadow: isSelected ? 'var(--seekora-swatch-ring, 0 0 0 1px #fff)' : 'none',
                            opacity: isAvailable ? 1 : 0.3,
                            position: 'relative',
                        }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
                            e.stopPropagation();
                            e.preventDefault();
                        }, onClick: (e) => {
                            e.stopPropagation();
                            if (isAvailable) {
                                onSwatchClick?.(option.name, value);
                            }
                        } }, !isAvailable && (React.createElement("span", { style: {
                            position: 'absolute',
                            top: '50%',
                            left: '-2px',
                            right: '-2px',
                            height: 1,
                            backgroundColor: 'var(--seekora-unavailable-line, #ef4444)',
                            transform: 'translateY(-50%) rotate(-45deg)',
                        } }))));
                }
                return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--text', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), style: {
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: textSwatchPadding,
                        minHeight: isMobile ? 32 : 24, // Minimum touch target on mobile
                        fontSize: textSwatchFontSize,
                        borderRadius: 3,
                        border: isSelected
                            ? '1px solid var(--seekora-primary, #111827)'
                            : '1px solid var(--seekora-border-color, #e5e7eb)',
                        backgroundColor: isSelected
                            ? 'var(--seekora-primary, #111827)'
                            : 'transparent',
                        color: isSelected
                            ? 'var(--seekora-primary-text, #fff)'
                            : 'var(--seekora-text-secondary, #6b7280)',
                        cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                        whiteSpace: 'nowrap',
                        fontWeight: isSelected ? 600 : 400,
                        opacity: isAvailable ? 1 : 0.4,
                        textDecoration: !isAvailable ? 'line-through' : 'none',
                    }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
                        e.stopPropagation();
                        e.preventDefault();
                    }, onClick: (e) => {
                        e.stopPropagation();
                        if (isAvailable) {
                            onSwatchClick?.(option.name, value);
                        }
                    } }, value));
            }),
            hasOverflow && (React.createElement("button", { type: "button", className: "seekora-variant-swatch--overflow", onClick: (e) => toggleExpanded(option.name, e), style: {
                    fontSize: textSwatchFontSize,
                    color: 'var(--seekora-primary, #2563eb)',
                    background: 'none',
                    border: 'none',
                    padding: isMobile ? '4px 8px' : 0,
                    minHeight: isMobile ? 32 : 'auto', // Touch target on mobile
                    cursor: 'pointer',
                    textDecoration: 'underline',
                    fontWeight: 500,
                } }, isExpanded ? 'Show less' : `+${overflow} more`))));
    })));
}
