CrazeAnalytix/components/BuyBoxWarningBadge.tsx

import React, { useState, memo } 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> = memo(({ 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="inline-block">
            <div
                className="relative 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"
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
            >
                <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>

                {/* Hover Popup */}
                {isHovered && (
                    <div className="absolute z-[100] left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 bg-slate-900 border border-amber-500/50 rounded-xl shadow-2xl shadow-black overflow-hidden pointer-events-none">
                        <div className="bg-amber-500/20 px-4 py-2.5 border-b border-white/10">
                            <span className="text-amber-400 text-[11px] font-black uppercase tracking-widest flex items-center gap-2">
                                <span>⚠️</span> Buy Box Lost Reason
                            </span>
                        </div>
                        <div className="p-3 space-y-2 max-h-64 overflow-y-auto">
                            {data.countries.map(country => (
                                <div
                                    key={country}
                                    className="flex items-start gap-3 px-3 py-2.5 rounded-lg bg-white/5 border border-white/5"
                                >
                                    <span className="text-xl 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>
        </div>
    );
});