CrazeAnalytix/components/BuyBoxWarningBadge.tsx

import React, { useState } from 'react';

interface BuyBoxWarningBadgeProps {
    asin: string;
    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
}

const COUNTRY_FLAGS: Record<string, string> = {
    DE: '🇩🇪',
    FR: '🇫🇷',
    IT: '🇮🇹',
    UK: '🇬🇧',
    ES: '🇪🇸',
};

export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, buyBoxLostMap }) => {
    const [isHovered, setIsHovered] = useState(false);

    if (!buyBoxLostMap || !asin) return null;

    const data = buyBoxLostMap.get(asin.toUpperCase());

    if (asin.toUpperCase() === 'B0D3874WSD') {
        console.log(`[BuyBoxBadge Debug] ASIN: ${asin}, Found in map: ${!!data}, Countries: ${data?.countries.join(', ') || 'none'}`);
    }

    if (!data || data.countries.length === 0) return null;

    return (
        <div
            className="relative inline-flex"
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            <div className="inline-flex items-center gap-1 px-1.5 h-5 rounded bg-amber-500/20 border border-amber-500/50 text-amber-400 text-[9px] font-bold uppercase tracking-tight cursor-help transition-all hover:bg-amber-500/30 hover:scale-105 whitespace-nowrap">
                <span className="text-xs leading-none">⚠️</span>
                <span>BB Lost</span>
                <span className="text-amber-300/80">{data.countries.slice(0, 3).join(', ')}{data.countries.length > 3 ? '...' : ''}</span>
            </div>

            {/* Hover Popup */}
            {isHovered && (
                <div className="absolute z-[100] left-0 bottom-full mb-1 w-64 bg-slate-900 border border-amber-500/50 rounded-xl shadow-2xl shadow-black animate-fade-in overflow-hidden">
                    <div className="bg-amber-500/20 px-3 py-2 border-b border-white/10">
                        <span className="text-amber-400 text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                            <span>⚠️</span> Buy Box Lost Reason
                        </span>
                    </div>
                    <div className="p-2 space-y-1">
                        {data.countries.map(country => (
                            <div
                                key={country}
                                className="flex items-start gap-2.5 px-3 py-2 rounded-lg bg-white/5 border border-white/5"
                            >
                                <span className="text-lg leading-none">{COUNTRY_FLAGS[country] || '🏳️'}</span>
                                <div className="flex flex-col min-w-0">
                                    <span className="text-[10px] font-black text-white uppercase tracking-tight opacity-60">
                                        {country}
                                    </span>
                                    <span className="text-xs font-bold text-amber-200 leading-tight">
                                        {data.reasons[country] || 'Unknown'}
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
};