/**
 * Recommendation Components
 *
 * Components for displaying product recommendations:
 * - RelatedProducts: Show related items based on a product
 * - TrendingItems: Display trending/popular products
 * - FrequentlyBoughtTogether: Bundle recommendations
 * - RecentlyViewed: User's recently viewed items
 */
import React, { useEffect, useState, useMemo } from "react";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../styles/inject";
export const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = false, title = "Related Products", maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = "carousel", currencySymbol = "$", }) => {
    const items = itemsProp?.slice(0, maxItems) || [];
    const loading = loadingProp;
    if (loading && items.length === 0)
        return null;
    if (items.length === 0)
        return null;
    return (React.createElement(RecommendationSection, { title: title, items: items, model: "related", renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
};
export const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, title = "Trending Now", maxItems = 8, renderItem, onItemClick, className, style, theme: customTheme, layout = "carousel", currencySymbol = "$", }) => {
    const items = itemsProp?.slice(0, maxItems) || [];
    const loading = loadingProp;
    if (loading && items.length === 0)
        return null;
    if (items.length === 0)
        return null;
    return (React.createElement(RecommendationSection, { title: title, items: items, model: "trending", renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
};
export const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadingProp = false, title = "Frequently Bought Together", maxItems = 4, renderItem, onItemClick, className, style, theme: customTheme, layout = "carousel", currencySymbol = "$", showAddAllButton = true, onAddAll, }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const recommendationTheme = customTheme || {};
    const items = itemsProp?.slice(0, maxItems) || [];
    const loading = loadingProp;
    const totalPrice = useMemo(() => {
        return items.reduce((sum, item) => {
            const itemPrice = item.price;
            const price = typeof itemPrice === "number"
                ? itemPrice
                : parseFloat(String(itemPrice)) || 0;
            return sum + price;
        }, 0);
    }, [items]);
    if (loading && items.length === 0)
        return null;
    if (items.length === 0)
        return null;
    return (React.createElement("div", { className: clsx("seekora-recommendations", recommendationTheme.root, className), "data-model": "fbt", "data-layout": layout, style: style },
        title && (React.createElement("div", { className: "seekora-recommendations__header" },
            React.createElement("h3", { className: clsx("seekora-recommendations__title", recommendationTheme.title) }, title))),
        React.createElement("div", { className: "seekora-recommendations__grid" },
            items.map((item, index) => (React.createElement(React.Fragment, { key: item.id || index },
                index > 0 && (React.createElement("span", { className: "seekora-recommendations__fbt-sep" }, "+")),
                React.createElement("div", { className: clsx("seekora-recommendations__item", onItemClick && "seekora-recommendations__item--clickable", recommendationTheme.item), onClick: () => onItemClick?.(item, index) }, renderItem ? (renderItem(item, index)) : (React.createElement(React.Fragment, null,
                    React.createElement("img", { src: item.image || item.imageUrl || "", alt: item.title || item.name || "", className: "seekora-recommendations__fbt-img" }),
                    React.createElement("div", { className: "seekora-recommendations__fbt-price" },
                        currencySymbol,
                        typeof item.price === "number"
                            ? item.price.toFixed(2)
                            : item.price))))))),
            showAddAllButton && items.length > 0 && (React.createElement("div", { className: "seekora-recommendations__cta" },
                React.createElement("div", { className: "seekora-recommendations__cta-total" },
                    "Total: ",
                    currencySymbol,
                    totalPrice.toFixed(2)),
                React.createElement("button", { type: "button", className: "seekora-recommendations__cta-btn", onClick: () => onAddAll?.(items) }, "Add all to cart"))))));
};
export const RecentlyViewed = ({ storageKey = "seekora_recently_viewed", items: itemsProp, title = "Recently Viewed", maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = "carousel", currencySymbol = "$", }) => {
    const [storedItems, setStoredItems] = useState([]);
    useEffect(() => {
        if (itemsProp)
            return;
        try {
            const stored = localStorage.getItem(storageKey);
            if (stored) {
                setStoredItems(JSON.parse(stored));
            }
        }
        catch (e) {
            // Ignore localStorage errors
        }
    }, [storageKey, itemsProp]);
    const items = (itemsProp || storedItems).slice(0, maxItems);
    if (items.length === 0)
        return null;
    return (React.createElement(RecommendationSection, { title: title, items: items, model: "personalized", renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
};
/**
 * Add item to recently viewed (utility function)
 */
export function addToRecentlyViewed(item, storageKey = "seekora_recently_viewed", maxItems = 20) {
    if (typeof localStorage === "undefined")
        return;
    try {
        const stored = localStorage.getItem(storageKey);
        let items = stored ? JSON.parse(stored) : [];
        // Remove if already exists
        items = items.filter((i) => i.id !== item.id);
        // Add to beginning
        items.unshift(item);
        // Limit
        items = items.slice(0, maxItems);
        localStorage.setItem(storageKey, JSON.stringify(items));
    }
    catch (e) {
        // Ignore localStorage errors
    }
}
const RecommendationSection = ({ title, items, model, renderItem, onItemClick, className, style, theme: customTheme, layout = "carousel", currencySymbol = "$", }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const recommendationTheme = customTheme || {};
    return (React.createElement("div", { className: clsx("seekora-recommendations", recommendationTheme.root, className), "data-model": model, "data-layout": layout, style: style },
        title && (React.createElement("div", { className: "seekora-recommendations__header" },
            React.createElement("h3", { className: clsx("seekora-recommendations__title", recommendationTheme.title) }, title))),
        React.createElement("div", { className: clsx("seekora-recommendations__grid", recommendationTheme.list) }, items.map((item, index) => (React.createElement("div", { key: item.id || index, className: clsx("seekora-recommendations__item", onItemClick && "seekora-recommendations__item--clickable", recommendationTheme.item), onClick: () => onItemClick?.(item, index) }, renderItem ? (renderItem(item, index)) : (React.createElement(DefaultRecommendationItem, { item: item, theme: recommendationTheme, currencySymbol: currencySymbol, layout: layout }))))))));
};
const DefaultRecommendationItem = ({ item, theme: recommendationTheme, currencySymbol, layout, }) => {
    const image = item.image || item.imageUrl || "";
    const title = item.title || item.name || "";
    const price = item.price;
    return (React.createElement(React.Fragment, null,
        image && (React.createElement("img", { src: image, alt: title, className: clsx("seekora-recommendations__item-img", recommendationTheme.image), "data-layout": layout })),
        React.createElement("div", { className: clsx("seekora-recommendations__item-body", recommendationTheme.content) },
            React.createElement("div", { className: clsx("seekora-recommendations__item-name", recommendationTheme.name) }, title),
            price !== undefined && (React.createElement("div", { className: clsx("seekora-recommendations__item-price", recommendationTheme.price) },
                currencySymbol,
                typeof price === "number" ? price.toFixed(2) : price)))));
};
