CrazeAnalytix/components/MetricDetailTooltip.tsx

import React, { useState } from 'react';

interface MetricDetailTooltipProps {
    children: React.ReactNode;
    currentValue: number;
    previousValue: number;
    yoyValue: number;
    currentWeekLabel: string;
    previousWeekLabel: string;
    yoyWeekLabel: string;
    metricName: string;
    metricColor: string;
    formatValue?: (val: number) => string;
    experimentDelta?: number | null;
    baselineValue?: number | null;
}

/**
 * Tooltip component to show comparison details on hover (WoW and YoY).
 * Extracted from WeeklyGrid to prevent circular dependencies and initialization errors.
 */
export const MetricDetailTooltip: React.FC<MetricDetailTooltipProps> = ({ 
    children, 
    currentValue, 
    previousValue, 
    yoyValue, 
    currentWeekLabel, 
    previousWeekLabel, 
    yoyWeekLabel, 
    metricName, 
    metricColor, 
    formatValue, 
    experimentDelta, 
    baselineValue 
}) => {
    const [isVisible, setIsVisible] = useState(false);

    const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0);
    const yoyGrowth = yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null;
    const format = formatValue || ((v: number) => v.toLocaleString('de-DE'));
    const hasYoyData = yoyValue > 0;

    return (
        <div
            className="relative inline-flex items-center"
            onMouseEnter={() => setIsVisible(true)}
            onMouseLeave={() => setIsVisible(false)}
        >
            <div className="cursor-help">{children}</div>
            {isVisible && (
                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 bg-slate-950 border border-white/20 rounded-xl shadow-2xl z-[200] p-3 pointer-events-none animate-in fade-in zoom-in-95 duration-150">
                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 pb-2 border-b border-white/10">
                        📊 {metricName} Comparison
                    </div>

                    <div className="space-y-1.5">
                        {/* Current Week */}
                        <div className="flex justify-between items-center">
                            <span className="text-[10px] text-slate-500 font-bold">{currentWeekLabel}</span>
                            <span className={`text-xs font-black ${metricColor}`}>{format(currentValue)}</span>
                        </div>

                        {/* Previous Week */}
                        <div className="flex justify-between items-center">
                            <span className="text-[10px] text-slate-500 font-bold">{previousWeekLabel}</span>
                            <span className="text-xs font-bold text-slate-400">{previousValue > 0 ? format(previousValue) : 'N/A'}</span>
                        </div>

                        {/* Same Week Last Year */}
                        <div className="flex justify-between items-center">
                            <span className="text-[10px] text-slate-500 font-bold">{yoyWeekLabel}</span>
                            <span className={`text-xs font-bold ${hasYoyData ? 'text-slate-400' : 'text-slate-600 italic'}`}>
                                {hasYoyData ? format(yoyValue) : 'No data'}
                            </span>
                        </div>

                        {/* WoW Growth */}
                        <div className="border-t border-white/10 pt-2 mt-2">
                            <div className="flex justify-between items-center">
                                <span className="text-[10px] text-slate-500 font-bold">vs Previous Week</span>
                                {previousValue > 0 ? (
                                    <span className={`text-xs font-black ${wowGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                        {wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}%
                                    </span>
                                ) : (
                                    <span className="text-xs font-bold text-slate-600 italic">N/A</span>
                                )}
                            </div>
                        </div>

                        {/* YoY Growth */}
                        <div className="flex justify-between items-center">
                            <span className="text-[10px] text-slate-500 font-bold">vs Same Week Last Year</span>
                            {yoyGrowth !== null ? (
                                <span className={`text-xs font-black ${yoyGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                    {yoyGrowth >= 0 ? '▲' : '▼'} {Math.abs(yoyGrowth).toFixed(1)}%
                                </span>
                            ) : (
                                <span className="text-xs font-bold text-slate-600 italic">No data</span>
                            )}
                        </div>

                        {/* Experiment Baseline Delta (If active) */}
                        {typeof experimentDelta === 'number' && typeof baselineValue === 'number' && (
                            <div className="border-t border-fuchsia-500/20 pt-2 mt-2 bg-fuchsia-500/5 -mx-3 px-3 pb-1">
                                <div className="flex justify-between items-center mb-1">
                                    <span className="text-[10px] text-fuchsia-400/80 font-bold">vs Pre-Experiment Baseline</span>
                                    <span className={`text-xs font-black ${experimentDelta >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                        {experimentDelta >= 0 ? '▲' : '▼'} {Math.abs(experimentDelta).toFixed(1)}%
                                    </span>
                                </div>
                                <div className="flex justify-between items-center">
                                    <span className="text-[9px] text-slate-500">Baseline Avg (4w)</span>
                                    <span className="text-[10px] font-bold text-slate-400">{format(baselineValue)}</span>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* Arrow */}
                    <div className="absolute bottom-[-6px] left-1/2 -translate-x-1/2 w-3 h-3 bg-slate-950 border-r border-b border-white/20 rotate-45"></div>
                </div>
            )}
        </div>
    );
};