

interface TrustIndicatorItem {
    platform: string
    rating: number
    max_rating: number
    review_count: string
    logo_url?: string
    link?: string
    star_color?: string
}

interface TrustIndicatorsConfig {
    heading?: string
    items: TrustIndicatorItem[]
    bg_color?: string
    star_color?: string
    text_color?: string
}

function StarRating({ rating, maxRating = 5, color = '#00b67a', size = 20 }: {
    rating: number
    maxRating?: number
    color?: string
    size?: number
}) {
    const stars = []
    for (let i = 1; i <= maxRating; i++) {
        const fill = rating >= i ? 1 : rating >= i - 0.5 ? 0.5 : 0
        stars.push(
            <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                {/* Empty star background */}
                <path
                    d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                    fill="#e0e0e0"
                />
                {/* Filled portion */}
                {fill > 0 && (
                    <>
                        <defs>
                            <clipPath id={`star-clip-${i}-${rating}`}>
                                <rect x="0" y="0" width={fill === 1 ? '24' : '12'} height="24" />
                            </clipPath>
                        </defs>
                        <path
                            d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                            fill={color}
                            clipPath={`url(#star-clip-${i}-${rating})`}
                        />
                    </>
                )}
            </svg>
        )
    }
    return <div className="flex items-center gap-0.5">{stars}</div>
}

/* Platform text styling — bold the first word for multi-word names like "HostAdvice" */
function PlatformName({ name }: { name: string }) {
    // Known platforms with specific visual weights
    const parts = name.split(/(?=[A-Z])/).filter(Boolean)
    if (parts.length === 2) {
        return (
            <span className="text-lg md:text-xl font-bold tracking-tight text-gray-900">
                <span className="font-extrabold">{parts[0]}</span>
                <span className="font-normal text-gray-500">{parts[1]}</span>
            </span>
        )
    }
    return (
        <span className="text-lg md:text-xl font-bold tracking-tight text-gray-900">
            {name}
        </span>
    )
}

export function TrustIndicators({ config }: { config?: TrustIndicatorsConfig }) {
    const items = config?.items ?? []
    if (items.length === 0) return null

    const bgColor = config?.bg_color || '#ffffff'
    const defaultStarColor = config?.star_color || '#00b67a'
    const textColor = config?.text_color || '#6b7280'

    return (
        <section
            className="py-8 md:py-12"
            style={{ backgroundColor: bgColor }}
        >
            {config?.heading && (
                <div className="container mx-auto px-4 mb-6 text-center">
                    <h2 className="text-lg font-semibold" style={{ color: textColor }}>{config.heading}</h2>
                </div>
            )}
            <div className="container mx-auto px-4">
                <div
                    className="grid gap-6 md:gap-8"
                    style={{ gridTemplateColumns: `repeat(${Math.min(items.length, 4)}, minmax(0, 1fr))` }}
                >
                    {items.map((item, i) => {
                        const starColor = item.star_color || defaultStarColor
                        const content = (
                            <div
                                key={i}
                                className={`flex flex-col items-center text-center gap-2 py-4 px-3 rounded-xl transition-all duration-300 ${item.link ? 'hover:bg-gray-50 hover:shadow-sm cursor-pointer' : ''}`}
                            >
                                {/* Platform name or logo */}
                                {item.logo_url ? (
                                    <img
                                        src={item.logo_url}
                                        alt={item.platform}
                                        className="h-7 md:h-8 w-auto object-contain"
                                    />
                                ) : (
                                    <PlatformName name={item.platform} />
                                )}

                                {/* Star rating */}
                                <StarRating
                                    rating={item.rating}
                                    maxRating={item.max_rating}
                                    color={starColor}
                                    size={22}
                                />

                                {/* Review count and rating */}
                                <p className="text-sm font-medium" style={{ color: starColor }}>
                                    {item.review_count} | {item.rating}/{item.max_rating}
                                </p>
                            </div>
                        )

                        if (item.link) {
                            return (
                                <a
                                    key={i}
                                    href={item.link}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="no-underline"
                                >
                                    {content}
                                </a>
                            )
                        }
                        return content
                    })}
                </div>
            </div>
        </section>
    )
}
