CrazeAnalytix/components/VendorStockBadge.tsx

import React from 'react';
import { AmazonSmileIcon } from './Icons';

interface VendorStockBadgeProps {
    asin: string;
    vendorStockMap?: Map<string, { eu: number; uk: number }>;
    mode: 'eu' | 'uk';
    avgWeeklySales?: number;
}

export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendorStockMap, mode, avgWeeklySales }) => {
    if (!asin) return null;

    const stockData = vendorStockMap?.get(asin.toUpperCase());
    
    if (!stockData) {
        return (
            <div className="flex flex-col items-center gap-0.5 justify-center min-w-[70px] opacity-40 group-hover:opacity-100 transition-opacity" title={`Inventory data missing for ASIN: ${asin}`}>
                <div className="text-[10px] font-bold text-slate-500 bg-slate-800/50 px-2 py-0.5 rounded border border-white/5">
                   No Data
                </div>
                <div className="px-1.5 py-0.5 rounded-sm bg-slate-900/20 border border-white/5">
                    <span className="text-[10px] font-black text-slate-600">-</span>
                </div>
            </div>
        );
    }

    const stock = mode === 'uk' ? stockData.uk : stockData.eu;

    // Calculate Weeks of Coverage (WOC)
    // If sales are 0 but store has stock -> Infinite coverage (>52 weeks) -> Green
    // If sales are 0 and NO stock -> 0 weeks -> Red
    // If sales > 0 -> Calculate stock/sales
    let woc: number = 0;
    const velocity = avgWeeklySales || 0;

    if (velocity > 0) {
        woc = stock / velocity;
    } else if (stock > 0) {
        woc = 999;
    } else {
        woc = 0;
    }

    const wocText = woc === 999 ? '> 52 Weeks' : `${woc.toFixed(1)} Weeks Cover`;
    const wocColor = woc < 4 ? 'text-rose-500' : 'text-emerald-500';

    const themeClasses = "bg-slate-200 text-slate-800 border-slate-300 shadow-sm";

    return (
        <div className="flex flex-col items-center gap-0.5 justify-center min-w-[70px]">
            <div
                className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[10px] font-bold transition-all hover:scale-105 active:scale-95 cursor-default ${themeClasses}`}
                title={`Stock en Amazon Warehouse (${mode.toUpperCase()}): ${stock}`}
            >
                <AmazonSmileIcon className="w-3.5 h-3.5" />
                <div className="flex flex-col leading-[0.8]">
                    <span className="text-[7px] font-black uppercase opacity-60">Vendor</span>
                    <span>{stock.toLocaleString('de-DE')}</span>
                </div>
            </div>
            <div 
                className={`px-1.5 py-0.5 rounded-sm bg-slate-900/40 border border-white/5 shadow-inner`}
                title={`Avg Sales (4wk): ${velocity.toFixed(2)} | Stock: ${stock}`}
            >
                <span className={`text-[10px] font-black uppercase tracking-tighter whitespace-nowrap block ${wocColor}`}>
                    {wocText}
                </span>
            </div>
        </div>
    );
};