import React, { useState, useEffect, useMemo } from 'react';
import { TrendingUp, Calculator, HelpCircle, ArrowRight } from 'lucide-react';

const GrowthSimulator = () => {
    // Estado: Inputs Reais
    const [inputs, setInputs] = useState({
        spend: 15000,
        cpc: 2.50,
        ctr: 1.8,
        conversionRate: 1.2,
        aov: 280 // Ticket Médio
    });

    // Estado: Modificadores de Simulação
    const [simulatedInputs, setSimulatedInputs] = useState({ ...inputs });

    // Sincronizar simulação quando 'Reais' mudam
    useEffect(() => {
        setSimulatedInputs(inputs);
    }, [inputs]);

    // Utilitários de Formatação
    const formatMoney = (value) => new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
    const formatNumber = (value) => new Intl.NumberFormat('pt-BR').format(Math.round(value));

    // Lógica de Cálculo Central
    const calculateMetrics = (data) => {
        const { spend, cpc, ctr, conversionRate, aov } = data;
        
        // Evitar divisão por zero
        const safeCPC = cpc > 0 ? cpc : 0.01;
        
        const clicks = spend / safeCPC;
        const impressions = ctr > 0 ? clicks / (ctr / 100) : 0;
        
        const conversions = clicks * (conversionRate / 100);
        const revenue = conversions * aov;
        const roas = spend > 0 ? revenue / spend : 0;
        const cac = conversions > 0 ? spend / conversions : 0;
        const profit = revenue - spend; // Lucro bruto de mídia

        return {
            spend, cpc, ctr, conversionRate, aov,
            clicks, impressions, conversions, revenue, roas, cac, profit
        };
    };

    // Memoized Results
    const currentMetrics = useMemo(() => calculateMetrics(inputs), [inputs]);
    const simulatedMetrics = useMemo(() => calculateMetrics(simulatedInputs), [simulatedInputs]);

    // Handlers para Inputs Calculados (Cliques e Conversões)
    const handleClicksChange = (newClicks) => {
        if (newClicks <= 0) return;
        const newCpc = inputs.spend / newClicks;
        setInputs(prev => ({ ...prev, cpc: parseFloat(newCpc.toFixed(4)) }));
    };

    const handleConversionsChange = (newConversions) => {
        if (newConversions < 0) return;
        const clicks = inputs.spend / (inputs.cpc || 0.01);
        const newCr = clicks > 0 ? (newConversions / clicks) * 100 : 0;
        setInputs(prev => ({ ...prev, conversionRate: parseFloat(newCr.toFixed(4)) }));
    };

    // Dados para o Gráfico
    const chartData = [
        { label: 'Receita', current: currentMetrics.revenue, simulated: simulatedMetrics.revenue, format: formatMoney },
        { label: 'Lucro (Mídia)', current: currentMetrics.profit, simulated: simulatedMetrics.profit, format: formatMoney },
    ];

    return (
        <div className="min-h-screen p-4 md:p-8 max-w-7xl mx-auto bg-[#F8FAFC] font-sans text-slate-800">
            <style>{`
                input[type=range] { -webkit-appearance: none; background: transparent; }
                input[type=range]::-webkit-slider-thumb {
                    -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
                    background: #3B82F6; cursor: pointer; margin-top: -6px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
                }
                input[type=range]::-webkit-slider-runnable-track {
                    width: 100%; height: 4px; cursor: pointer; background: #E2E8F0; border-radius: 2px;
                }
                .bar-transition { transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
            `}</style>

            {/* Header */}
            <header className="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <div className="flex items-center gap-2 text-blue-600 mb-1">
                        <TrendingUp size={20} />
                        <span className="font-bold tracking-tight text-sm uppercase">Growth Tools</span>
                    </div>
                    <h1 className="text-3xl font-bold text-slate-900">Simulador de Tráfego & Performance</h1>
                    <p className="text-slate-500 mt-1">Simule o impacto de mudanças no CPC, Investimento e Conversão no seu resultado final.</p>
                </div>
                <button 
                    onClick={() => setSimulatedInputs(inputs)}
                    className="bg-white border border-slate-200 hover:bg-slate-50 text-slate-600 px-4 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2"
                >
                    <Calculator size={20} />
                    Resetar Simulação
                </button>
            </header>

            {/* Layout Principal: Stack Vertical */}
            <div className="flex flex-col gap-8">
                
                {/* SEÇÃO 1: Cenário Atual (Topo Full Width) */}
                <div className="w-full">
                    <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg">
                        <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 border-b border-slate-700 pb-4">
                            <div>
                                <h2 className="text-xl font-bold flex items-center gap-2 text-white">
                                    1. Cenário Atual
                                </h2>
                                <p className="text-slate-400 text-sm mt-1">Insira suas métricas médias dos últimos 30 dias para estabelecer a base.</p>
                            </div>
                            <div className="mt-2 md:mt-0 text-right hidden md:block">
                                <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">Receita Atual</span>
                                <div className="text-2xl font-bold text-emerald-400">{formatMoney(currentMetrics.revenue)}</div>
                            </div>
                        </div>
                        
                        {/* Grid Responsivo de Inputs */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 text-slate-800">
                            <MetricInput 
                                label="Investimento" 
                                value={inputs.spend} 
                                onChange={(v) => setInputs({...inputs, spend: v})}
                                prefix="R$"
                                step="100"
                            />
                            
                            {/* Grupo CPC/Cliques */}
                            <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                                <div className="flex justify-between items-center mb-2">
                                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Tráfego</label>
                                    <Tooltip text="Relação entre Custo por Clique e Volume" />
                                </div>
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between border-b border-slate-100 pb-2">
                                        <span className="text-xs text-slate-400">CPC</span>
                                        <input 
                                            type="number" 
                                            value={inputs.cpc}
                                            onChange={(e) => setInputs({...inputs, cpc: parseFloat(e.target.value) || 0})}
                                            className="w-20 text-right font-bold text-sm text-slate-700 outline-none focus:text-blue-600"
                                        />
                                    </div>
                                    <div className="flex items-center justify-between">
                                        <span className="text-xs text-slate-400">Cliques</span>
                                        <input 
                                            type="number" 
                                            value={Math.round(currentMetrics.clicks)}
                                            onChange={(e) => handleClicksChange(parseInt(e.target.value) || 0)}
                                            className="w-20 text-right font-bold text-sm text-slate-700 outline-none focus:text-blue-600 bg-slate-50 rounded px-1"
                                        />
                                    </div>
                                </div>
                            </div>

                            <MetricInput 
                                label="CTR (Click-Through)" 
                                tooltip="Impressões / Cliques"
                                value={inputs.ctr} 
                                onChange={(v) => setInputs({...inputs, ctr: v})}
                                suffix="%"
                            />

                            {/* Grupo Conversão/Pedidos */}
                            <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                                <div className="flex justify-between items-center mb-2">
                                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Vendas</label>
                                    <Tooltip text="Relação entre Taxa de Conversão e Pedidos" />
                                </div>
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between border-b border-slate-100 pb-2">
                                        <span className="text-xs text-slate-400">Taxa %</span>
                                        <input 
                                            type="number" 
                                            value={inputs.conversionRate}
                                            onChange={(e) => setInputs({...inputs, conversionRate: parseFloat(e.target.value) || 0})}
                                            className="w-20 text-right font-bold text-sm text-slate-700 outline-none focus:text-blue-600"
                                        />
                                    </div>
                                    <div className="flex items-center justify-between">
                                        <span className="text-xs text-slate-400">Pedidos</span>
                                        <input 
                                            type="number" 
                                            value={Math.round(currentMetrics.conversions)}
                                            onChange={(e) => handleConversionsChange(parseInt(e.target.value) || 0)}
                                            className="w-20 text-right font-bold text-sm text-slate-700 outline-none focus:text-blue-600 bg-slate-50 rounded px-1"
                                        />
                                    </div>
                                </div>
                            </div>

                            <MetricInput 
                                label="Ticket Médio" 
                                value={inputs.aov} 
                                onChange={(v) => setInputs({...inputs, aov: v})}
                                prefix="R$"
                                step="1"
                            />
                        </div>
                    </div>
                </div>

                {/* SEÇÃO 2: Simulação e Resultados (Abaixo) */}
                <div className="w-full space-y-6">
                    
                    {/* Cards de KPI Principal (Comparison) */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        <KPICard 
                            title="Receita Projetada" 
                            current={currentMetrics.revenue} 
                            simulated={simulatedMetrics.revenue} 
                            formatFn={formatMoney} 
                        />
                        <KPICard 
                            title="ROAS (Retorno)" 
                            current={currentMetrics.roas} 
                            simulated={simulatedMetrics.roas} 
                            formatFn={(v) => `${v.toFixed(2)}x`} 
                        />
                        <KPICard 
                            title="CAC (Custo/Aq)" 
                            current={currentMetrics.cac} 
                            simulated={simulatedMetrics.cac} 
                            formatFn={formatMoney}
                            inverse={true} 
                        />
                        <KPICard 
                            title="Novos Pedidos" 
                            current={currentMetrics.conversions} 
                            simulated={simulatedMetrics.conversions} 
                            formatFn={formatNumber} 
                        />
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        {/* Bloco de Simulação */}
                        <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
                            <div className="flex justify-between items-center mb-6">
                                <h2 className="text-lg font-bold text-slate-800">2. Simulador "E se..."</h2>
                                <span className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded font-medium">Ajuste os controles</span>
                            </div>
                            
                            <div className="space-y-6">
                                <SimulationControl 
                                    label="Novo Investimento" 
                                    value={simulatedInputs.spend}
                                    baseValue={inputs.spend}
                                    onChange={(v) => setSimulatedInputs({...simulatedInputs, spend: v})}
                                    min={inputs.spend * 0.5} max={inputs.spend * 3} step={100}
                                    prefix="R$"
                                />
                                <SimulationControl 
                                    label="Otimização de CPC" 
                                    value={simulatedInputs.cpc}
                                    baseValue={inputs.cpc}
                                    onChange={(v) => setSimulatedInputs({...simulatedInputs, cpc: v})}
                                    min={0.10} max={inputs.cpc * 2} step={0.05}
                                    prefix="R$"
                                />
                                <SimulationControl 
                                    label="Nova Taxa de Conversão" 
                                    value={simulatedInputs.conversionRate}
                                    baseValue={inputs.conversionRate}
                                    onChange={(v) => setSimulatedInputs({...simulatedInputs, conversionRate: v})}
                                    min={0.1} max={5.0} step={0.1}
                                    suffix="%"
                                />
                                    <SimulationControl 
                                    label="Novo Ticket Médio" 
                                    value={simulatedInputs.aov}
                                    baseValue={inputs.aov}
                                    onChange={(v) => setSimulatedInputs({...simulatedInputs, aov: v})}
                                    min={inputs.aov * 0.5} max={inputs.aov * 2} step={5}
                                    prefix="R$"
                                />
                            </div>
                        </div>

                        {/* Bloco Gráfico e Detalhes */}
                        <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 flex flex-col">
                            <h2 className="text-lg font-bold text-slate-800 mb-6">Impacto Financeiro</h2>
                            
                            {/* Gráfico de Barras Customizado */}
                            <div className="flex-1 flex items-end justify-around space-x-4 mb-6 relative min-h-[200px] border-b border-slate-100 pb-2">
                                {chartData.map((data, idx) => {
                                    // Calcular altura relativa (max 100%)
                                    const maxVal = Math.max(data.current, data.simulated) * 1.2; // 20% padding
                                    const hCurrent = (data.current / maxVal) * 100;
                                    const hSim = (data.simulated / maxVal) * 100;

                                    return (
                                        <div key={idx} className="flex-1 flex gap-2 justify-center h-full items-end group">
                                            {/* Barra Atual */}
                                            <div className="w-12 md:w-16 flex flex-col items-center justify-end h-full">
                                                <span className="text-xs text-slate-400 mb-1">{data.format(data.current)}</span>
                                                <div style={{ height: `${hCurrent}%` }} className="w-full bg-slate-300 rounded-t-md bar-transition relative group-hover:opacity-80"></div>
                                                <span className="text-xs font-medium text-slate-500 mt-2">Atual</span>
                                            </div>
                                            
                                            {/* Barra Simulada */}
                                            <div className="w-12 md:w-16 flex flex-col items-center justify-end h-full">
                                                <span className={`text-xs font-bold mb-1 ${data.simulated >= data.current ? 'text-emerald-600' : 'text-rose-600'}`}>
                                                    {data.format(data.simulated)}
                                                </span>
                                                <div 
                                                    style={{ height: `${hSim}%` }} 
                                                    className={`w-full rounded-t-md bar-transition relative ${data.simulated >= data.current ? 'bg-emerald-500' : 'bg-rose-500'} bg-opacity-90 shadow-lg shadow-blue-100`}
                                                >
                                                    {/* Line Pattern Overlay for style */}
                                                    <div className="absolute inset-0 w-full h-full opacity-10" style={{backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 5px, #fff 5px, #fff 10px)'}}></div>
                                                </div>
                                                <span className="text-xs font-bold text-slate-700 mt-2">Simulado</span>
                                            </div>
                                        </div>
                                    )
                                })}
                            </div>

                            {/* Mini Tabela de Dados Extra */}
                            <div className="bg-slate-50 rounded-lg p-3 text-sm">
                                <div className="flex justify-between items-center py-1 border-b border-slate-200">
                                    <span className="text-slate-500">Lucro Líquido (Mídia)</span>
                                    <div className="flex gap-3">
                                        <span className="text-slate-400 line-through">{formatMoney(currentMetrics.profit)}</span>
                                        <span className={`font-bold ${simulatedMetrics.profit >= currentMetrics.profit ? 'text-emerald-600' : 'text-rose-600'}`}>
                                            {formatMoney(simulatedMetrics.profit)}
                                        </span>
                                    </div>
                                </div>
                                <div className="flex justify-between items-center py-1 mt-1">
                                    <span className="text-slate-500">Volume de Cliques</span>
                                    <div className="flex gap-3">
                                        <span className="text-slate-400">{formatNumber(currentMetrics.clicks)}</span>
                                        <span className="text-slate-300">→</span>
                                        <span className="font-bold text-slate-700">{formatNumber(simulatedMetrics.clicks)}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

// Componentes Auxiliares
const Tooltip = ({ text }) => (
    <div className="group relative inline-block ml-1">
        <HelpCircle size={14} className="text-gray-400 cursor-help" />
        <div className="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-slate-800 rounded shadow-lg whitespace-nowrap z-50">
            {text}
            <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800"></div>
        </div>
    </div>
);

const MetricInput = ({ label, value, onChange, prefix, suffix, type = "number", step = "0.01", tooltip }) => (
    <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow h-full flex flex-col justify-between">
        <div className="flex items-center justify-between mb-2">
            <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide flex items-center">
                {label}
                {tooltip && <Tooltip text={tooltip} />}
            </label>
        </div>
        <div className="relative">
            {prefix && <span className="absolute left-0 top-1/2 -translate-y-1/2 text-slate-400 text-sm font-medium pl-3">{prefix}</span>}
            <input 
                type={type} 
                value={value} 
                onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
                step={step}
                className={`w-full bg-slate-50 border border-slate-200 text-slate-800 font-bold text-lg rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all py-2 ${prefix ? 'pl-10' : 'pl-3'} ${suffix ? 'pr-8' : 'pr-3'}`}
            />
            {suffix && <span className="absolute right-0 top-1/2 -translate-y-1/2 text-slate-400 text-sm font-medium pr-3">{suffix}</span>}
        </div>
    </div>
);

const SimulationControl = ({ label, value, baseValue, onChange, min, max, step, prefix, suffix }) => {
    const percentChange = ((value - baseValue) / baseValue) * 100;
    const isPositive = percentChange > 0;
    const isNegative = percentChange < 0;
    
    return (
        <div className="mb-6 last:mb-0">
            <div className="flex justify-between items-end mb-2">
                <label className="text-sm font-medium text-slate-700">{label}</label>
                <div className={`text-xs font-bold px-2 py-0.5 rounded ${isPositive ? 'bg-green-100 text-green-700' : isNegative ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
                    {percentChange > 0 ? '+' : ''}{percentChange.toFixed(1)}%
                </div>
            </div>
            
            <div className="flex items-center gap-4">
                <div className="flex-1">
                    <input 
                        type="range" 
                        min={min} 
                        max={max} 
                        step={step} 
                        value={value} 
                        onChange={(e) => onChange(parseFloat(e.target.value))}
                        className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                    />
                </div>
                <div className="w-24 relative">
                        {prefix && <span className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 text-xs">{prefix}</span>}
                    <input 
                        type="number" 
                        value={value} 
                        onChange={(e) => onChange(parseFloat(e.target.value))}
                        className={`w-full text-right text-sm font-semibold border rounded p-1 pl-4 focus:ring-1 focus:ring-blue-500 outline-none ${value !== baseValue ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-slate-300 text-slate-600'}`}
                    />
                        {suffix && <span className="absolute right-6 top-1/2 -translate-y-1/2 text-slate-400 text-xs">{suffix}</span>}
                </div>
            </div>
        </div>
    );
};

const KPICard = ({ title, current, simulated, formatFn, inverse = false }) => {
    const delta = simulated - current;
    const deltaPercent = (delta / current) * 100;
    
    const isGood = inverse ? delta < 0 : delta > 0;
    const isNeutral = delta === 0;
    
    const colorClass = isNeutral 
        ? 'text-slate-400' 
        : isGood ? 'text-emerald-600' : 'text-rose-600';
        
    const bgClass = isNeutral
        ? 'bg-slate-50'
        : isGood ? 'bg-emerald-50' : 'bg-rose-50';

    return (
        <div className="bg-white rounded-xl border border-slate-200 p-5 flex flex-col justify-between shadow-sm relative overflow-hidden">
            <div className={`absolute left-0 top-0 bottom-0 w-1 ${isNeutral ? 'bg-slate-200' : isGood ? 'bg-emerald-500' : 'bg-rose-500'}`}></div>
            
            <div>
                <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">{title}</h3>
                <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-bold text-slate-800 tracking-tight">{formatFn(simulated)}</span>
                </div>
            </div>

            <div className="mt-4 pt-3 border-t border-slate-100 flex justify-between items-center text-sm">
                <span className="text-slate-400">Anterior: {formatFn(current)}</span>
                
                {!isNeutral && (
                    <div className={`flex items-center px-2 py-1 rounded-md font-medium text-xs ${bgClass} ${colorClass}`}>
                        {delta > 0 ? '▲' : '▼'} {Math.abs(deltaPercent).toFixed(1)}%
                    </div>
                )}
            </div>
        </div>
    );
};

export default GrowthSimulator;