/**
 * ItemCard – generic item tile (primitive)
 *
 * Domain-agnostic: works for docs, articles, products, or any hit with id, title,
 * optional description, image, url. Overridable via className/style. Use for
 * search results, section blocks, or any list; for e-commerce products use ProductCard.
 */
import React, { useEffect } from "react";
import { clsx } from "clsx";
import { ImageDisplay } from "../primitives/ImageDisplay";
import { ActionButtons } from "../primitives/ActionButtons";
import { useIsMobile, useResponsiveGap } from "../../utils/responsive";
import { useCardAnalytics, } from "../../hooks/useCardAnalytics";
import { ensureSeekoraStyles } from "../../styles/inject";
export function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = "single", layout = "vertical", actionButtons, actionButtonsPosition = "overlay-top-right", showActionLabels = false, surface = "results_page", objectType = "product", searchId, trackingEnabled = true, }) {
    // V4 analytics: Search Impression on viewport entry + Object Clicked
    // wrapped around onSelect. No-op when ItemCard renders outside a
    // SearchProvider or trackingEnabled=false. Position is optional on
    // ItemCard (the type allows it), but V4 emissions need it -- gate the
    // hook on position being defined.
    const { ref: trackerRef, onClick: trackedOnClick } = useCardAnalytics({
        objectId: String(item.id ?? ""),
        position: position ?? 0,
        objectType,
        surface,
        searchId,
        onSelect,
        enabled: trackingEnabled && position != null && Boolean(item.id),
    });
    // Inject canonical stylesheet once on mount
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const images = item.images?.length
        ? item.images
        : item.image ?? item.imageUrl
            ? [String(item.image ?? item.imageUrl)]
            : [];
    const title = item.title ?? item.primaryText ?? "";
    const description = item.description ?? item.secondaryText;
    const href = item.url;
    const isMobile = useIsMobile();
    const horizontalGap = useResponsiveGap(12);
    const isHorizontal = layout === "horizontal";
    const [isHovered, setIsHovered] = React.useState(false);
    // Responsive dimensions for horizontal layout
    const imageMinWidth = isMobile ? 60 : 80;
    const imageMaxWidth = isMobile ? 100 : 120;
    const imageFlex = isMobile ? "20%" : "20%";
    const imageHeight = isMobile ? 60 : 80;
    // Responsive font sizes
    const titleFontSize = isMobile ? "0.9375rem" : "0.875rem";
    const descriptionFontSize = isMobile ? "0.875rem" : "0.8125rem";
    const textGap = isMobile ? 6 : 4;
    const lineClamp = isMobile ? 3 : 2; // More lines on mobile
    const imageBlock = images.length > 0 ? (React.createElement("div", { className: "seekora-item-card__image-wrap", style: isHorizontal
            ? {
                minWidth: imageMinWidth,
                flexBasis: imageFlex,
                maxWidth: imageMaxWidth,
                flexShrink: 0,
            }
            : undefined },
        React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" }),
        actionButtons &&
            actionButtons.length > 0 &&
            actionButtonsPosition?.startsWith("overlay") && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === "overlay-top-right"
                ? "top-right"
                : "bottom-center", showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: isHorizontal
            ? {
                minWidth: imageMinWidth,
                flexBasis: imageFlex,
                maxWidth: imageMaxWidth,
                height: imageHeight,
                flexShrink: 0,
            }
            : undefined, "aria-hidden": true }));
    const textBlock = (React.createElement("div", { style: isHorizontal
            ? {
                display: "flex",
                flexDirection: "column",
                gap: textGap,
                flex: 1,
                minWidth: 0,
            }
            : undefined },
        React.createElement("span", { className: "seekora-item-card-title", style: {
                fontSize: titleFontSize,
                WebkitLineClamp: isHorizontal ? 2 : 3,
            } }, String(title)),
        description ? (React.createElement("span", { className: "seekora-item-card-description", style: {
                fontSize: descriptionFontSize,
                WebkitLineClamp: lineClamp,
            } }, String(description))) : null,
        actionButtons &&
            actionButtons.length > 0 &&
            actionButtonsPosition === "inline" && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" }))));
    const content = isHorizontal ? (React.createElement("div", { style: { display: "flex", gap: horizontalGap, alignItems: "flex-start" } },
        imageBlock,
        textBlock)) : (React.createElement(React.Fragment, null,
        imageBlock,
        textBlock));
    // Wrap mousedown handler so the V4 click fires before the consumer's
    // onSelect runs (which often navigates synchronously, killing
    // background analytics flushes).
    const handleMouseDown = onSelect
        ? (e) => {
            e.preventDefault();
            trackedOnClick();
        }
        : undefined;
    const commonProps = {
        className: clsx("seekora-item-card", isHorizontal && "seekora-item-card--horizontal", isHovered && "seekora-item-card--hover", className),
        style: style,
        "data-position": position,
        onClick: trackedOnClick,
        onMouseEnter: () => setIsHovered(true),
        onMouseLeave: () => setIsHovered(false),
        onMouseDown: handleMouseDown,
    };
    if (asLink && href) {
        return (React.createElement("a", { ref: trackerRef, href: href, ...commonProps, "data-item-id": item.id }, content));
    }
    return (React.createElement("button", { ref: trackerRef, type: "button", ...commonProps, "data-item-id": item.id }, content));
}
