Enhance Buy Box warning badge with styled hover popup showing reasons and flags

components/BuyBoxWarningBadge.tsx

@@ -1,28 +1,66 @@
-import React from 'react';
+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 (!data || data.countries.length === 0) return null;
 
-    const tooltipContent = data.countries
-        .map(c => `${c}: ${data.reasons[c] || 'Unknown'}`)
-        .join('\n');
-
     return (
         <div
-            className="inline-flex items-center gap-1 px-1.5 py-0.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"
+            className="relative inline-flex"
-            title={`⚠️ Buy Box Lost\n${tooltipContent}`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
         >
+            <div className="inline-flex items-center gap-1 px-1.5 py-0.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">
                 <span className="text-xs">⚠️</span>
                 <span>BB Lost</span>
                 <span className="text-amber-300/80">{data.countries.join(', ')}</span>
             </div>
+
+            {/* Hover Popup */}
+            {isHovered && (
+                <div className="absolute z-50 left-0 top-full mt-1 w-56 bg-slate-900 border border-amber-500/30 rounded-lg shadow-xl shadow-black/50 animate-fade-in overflow-hidden">
+                    <div className="bg-amber-500/20 px-3 py-2 border-b border-amber-500/30">
+                        <span className="text-amber-400 text-[10px] font-black uppercase tracking-widest">
+                            ⚠️ Buy Box Lost
+                        </span>
+                    </div>
+                    <div className="p-2 space-y-1.5">
+                        {data.countries.map(country => (
+                            <div
+                                key={country}
+                                className="flex items-start gap-2 px-2 py-1.5 rounded bg-slate-800/50 border border-white/5"
+                            >
+                                <span className="text-base">{COUNTRY_FLAGS[country] || '🏳️'}</span>
+                                <div className="flex flex-col min-w-0">
+                                    <span className="text-[10px] font-black text-white uppercase tracking-tight">
+                                        {country}
+                                    </span>
+                                    <span className="text-[10px] text-amber-400/90 truncate" title={data.reasons[country] || 'Unknown'}>
+                                        {data.reasons[country] || 'Unknown'}
+                                    </span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
     );
 };