import React from 'react';

/**
 * Tooltip padronizado para gráficos do Financeiro V2.
 * Garante contraste adequado em modos claro e escuro.
 * Suporta visualização de item único (Pie/Single Bar) e múltiplo (Stacked/Grouped Bar).
 */
export const FinanceiroChartTooltip = ({ active, payload, label, formatCurrency }) => {
    if (!active || !payload?.length) return null;

    // Função de formatação interna
    const formatValue = (val) => {
        if (formatCurrency) return formatCurrency(val);
        if (typeof val === 'number') {
            return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(val);
        }
        return val;
    };

    // Detecta se é um gráfico comparativo (mais de 1 série de dados)
    const isMulti = payload.length > 1;
    
    // Define o título:
    // - Se for multi-série, usa o label do eixo X (ex: "Jan/2024")
    // - Se for single-série, prioriza o nome do item (ex: "Serviços" no Pie) ou label
    const title = isMulti ? label : (payload[0].name ?? label ?? '—');
    
    // Cor do título (se for single, tenta usar a cor do item)
    const titleColor = !isMulti && payload[0].payload?.fill ? payload[0].payload.fill : undefined;

    return (
        <div className="rounded-xl border border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md px-4 py-3 shadow-xl min-w-[160px] animate-in fade-in zoom-in-95 duration-200 z-50">
            <p 
                className="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1.5 border-b border-slate-100 dark:border-slate-800 pb-1"
                style={titleColor ? { color: titleColor } : {}}
            >
                {title}
            </p>

            {isMulti ? (
                <div className="space-y-1.5">
                    {payload.map((entry, idx) => (
                        <div key={idx} className="flex justify-between gap-4 text-xs items-center">
                            <div className="flex items-center gap-1.5">
                                <div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color || entry.fill }} />
                                <span className="text-slate-500 dark:text-slate-400 font-medium whitespace-nowrap">{entry.name}:</span>
                            </div>
                            <span className="font-bold text-slate-700 dark:text-slate-200 tabular-nums">
                                {formatValue(entry.value)}
                            </span>
                        </div>
                    ))}
                </div>
            ) : (
                <p className="text-base font-bold text-slate-900 dark:text-white tabular-nums">
                    {formatValue(payload[0].value)}
                </p>
            )}
        </div>
    );
};
