/**
 * RatingDisplay – star rating display with review count
 *
 * Supports multiple variants: stars-only, compact, full, inline.
 * Can be read-only (display) or interactive (for reviews).
 */
import React, { useState } from 'react';
import { clsx } from 'clsx';
const sizeMap = {
    small: 14,
    medium: 18,
    large: 24,
};
const fontSizeMap = {
    small: '0.75rem',
    medium: '0.875rem',
    large: '1rem',
};
function StarIcon({ filled, half, size, color, emptyColor, interactive, onHover, onClick, }) {
    if (half) {
        return (React.createElement("span", { className: clsx('seekora-rating-star', 'seekora-rating-star--half', interactive && 'seekora-rating-star--interactive'), style: {
                position: 'relative',
                display: 'inline-block',
                width: size,
                height: size,
                cursor: interactive ? 'pointer' : 'default',
            }, onMouseEnter: onHover, onClick: onClick },
            React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { position: 'absolute', top: 0, left: 0 } },
                React.createElement("defs", null,
                    React.createElement("linearGradient", { id: "half-fill" },
                        React.createElement("stop", { offset: "50%", stopColor: color }),
                        React.createElement("stop", { offset: "50%", stopColor: emptyColor }))),
                React.createElement("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z", fill: "url(#half-fill)", stroke: color, strokeWidth: "1" }))));
    }
    return (React.createElement("span", { className: clsx('seekora-rating-star', filled ? 'seekora-rating-star--filled' : 'seekora-rating-star--empty', interactive && 'seekora-rating-star--interactive'), style: {
            display: 'inline-block',
            width: size,
            height: size,
            cursor: interactive ? 'pointer' : 'default',
        }, onMouseEnter: onHover, onClick: onClick },
        React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: filled ? color : 'none', xmlns: "http://www.w3.org/2000/svg" },
            React.createElement("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z", stroke: filled ? color : emptyColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))));
}
export function RatingDisplay({ rating, reviewCount, variant = 'compact', size = 'medium', maxRating = 5, showNumeric = false, showHalfStars = true, interactive = false, onRatingChange, starColor = '#f59e0b', emptyStarColor = '#d1d5db', textColor = 'var(--seekora-text-secondary, #6b7280)', showReviewCount = true, reviewCountFormat, className, style, }) {
    const [hoverRating, setHoverRating] = useState(null);
    const clampedRating = Math.max(0, Math.min(maxRating, rating));
    const displayRating = interactive && hoverRating !== null ? hoverRating : clampedRating;
    const starSize = sizeMap[size];
    const fontSize = fontSizeMap[size];
    const formatReviewCount = (count) => {
        if (reviewCountFormat)
            return reviewCountFormat(count);
        if (count >= 1000000)
            return `${(count / 1000000).toFixed(1)}M`;
        if (count >= 1000)
            return `${(count / 1000).toFixed(1)}K`;
        return count.toString();
    };
    const renderStars = () => {
        const stars = [];
        for (let i = 1; i <= maxRating; i++) {
            const filled = i <= Math.floor(displayRating);
            const half = showHalfStars && i === Math.ceil(displayRating) && displayRating % 1 >= 0.25 && displayRating % 1 < 0.75;
            stars.push(React.createElement(StarIcon, { key: i, filled: filled, half: half, size: starSize, color: starColor, emptyColor: emptyStarColor, interactive: interactive, onHover: interactive ? () => setHoverRating(i) : undefined, onClick: interactive
                    ? () => {
                        setHoverRating(null);
                        onRatingChange?.(i);
                    }
                    : undefined }));
        }
        return stars;
    };
    const handleMouseLeave = () => {
        if (interactive) {
            setHoverRating(null);
        }
    };
    if (variant === 'stars-only') {
        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--stars-only', className), style: { display: 'inline-flex', alignItems: 'center', gap: 2, ...style }, onMouseLeave: handleMouseLeave }, renderStars()));
    }
    if (variant === 'compact') {
        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--compact', className), style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize, ...style }, onMouseLeave: handleMouseLeave },
            React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
            showNumeric && (React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: textColor } }, clampedRating.toFixed(1))),
            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-count", style: { color: textColor } },
                "(",
                formatReviewCount(reviewCount),
                ")"))));
    }
    if (variant === 'full') {
        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--full', className), style: { display: 'flex', flexDirection: 'column', gap: 4, fontSize, ...style }, onMouseLeave: handleMouseLeave },
            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
                React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
                React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: 'var(--seekora-text-primary, #111827)' } }, clampedRating.toFixed(1)),
                React.createElement("span", { className: "seekora-rating-max", style: { color: textColor } },
                    "/ ",
                    maxRating)),
            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-text", style: { fontSize: '0.875em', color: textColor } },
                "Based on ",
                formatReviewCount(reviewCount),
                " ",
                reviewCount === 1 ? 'review' : 'reviews'))));
    }
    if (variant === 'inline') {
        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--inline', className), style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize, ...style }, onMouseLeave: handleMouseLeave },
            React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: 'var(--seekora-text-primary, #111827)' } }, clampedRating.toFixed(1)),
            React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-count", style: { color: textColor } },
                "(",
                formatReviewCount(reviewCount),
                ")"))));
    }
    return null;
}
