import React from 'react';
import { Sparkles, Zap, ScanLine, ScanEye, BrainCircuit, TrendingUp, Plus, Activity, ShieldAlert } from 'lucide-react';
import CoachResult from '@/components/coach/CoachResult';

interface DashboardCoachProps {
    coachPlan: any;
    setCoachPlan: (plan: any) => void;
    coachHistory?: any[]; // Array of coach_analyses records
    setIsCoachWizardOpen: (open: boolean) => void;
    userPlan: 'free' | 'pro' | 'trial';
}

const DashboardCoach: React.FC<DashboardCoachProps> = ({ coachPlan, setCoachPlan, coachHistory = [], setIsCoachWizardOpen, userPlan }) => {

    const isPaid = userPlan === 'pro' || userPlan === 'trial';

    // ─────────────────────────────────────────────────────────────────────────────
    // STATE 1: NO HISTORY (HERO / ONBOARDING)
    // ─────────────────────────────────────────────────────────────────────────────
    if (!coachHistory || coachHistory.length === 0) {
        return (
            <div className="max-w-6xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-700">

                {/* Sleek Modern Header */}
                <div className="bg-gray-900 rounded-[2rem] p-8 md:p-12 mb-8 relative overflow-hidden text-white shadow-2xl">
                    {/* Abstract Premium Background */}
                    <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-600 rounded-full blur-[120px] opacity-20 translate-x-1/3 -translate-y-1/2"></div>
                    <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-blue-600 rounded-full blur-[100px] opacity-20 -translate-x-1/3 translate-y-1/3"></div>

                    <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-10">
                        <div className="max-w-xl">
                            <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full border border-white/10 w-fit mb-6">
                                <Sparkles size={12} className="text-brand-400" />
                                <span className="text-[10px] font-bold uppercase tracking-widest text-gray-200">AI Personal Trainer</span>
                            </div>

                            <h1 className="text-3xl md:text-5xl font-bold mb-4 tracking-tight leading-tight">
                                Seu Corpo, <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-emerald-400">
                                    Sua Melhor Versão.
                                </span>
                            </h1>
                            <p className="text-gray-400 text-lg mb-8 leading-relaxed font-light">
                                Chega de treinos genéricos. Nossa IA analisa seu biótipo e cria um protocolo 100% científico e adaptado para você.
                            </p>

                            <div className="flex flex-wrap gap-4">
                                {isPaid ? (
                                    <button
                                        onClick={() => setIsCoachWizardOpen(true)}
                                        className="px-8 py-3.5 bg-brand-600 hover:bg-brand-500 text-white rounded-xl font-bold flex items-center gap-3 transition-all shadow-lg shadow-brand-900/50 hover:scale-105 active:scale-95"
                                    >
                                        <Zap size={20} fill="currentColor" />
                                        Gerar Novo Protocolo
                                    </button>
                                ) : (
                                    <button
                                        disabled
                                        className="px-8 py-3.5 bg-gray-700 text-gray-400 rounded-xl font-bold flex items-center gap-3 cursor-not-allowed opacity-75"
                                    >
                                        <Zap size={20} />
                                        Disponível no Plano PRO
                                    </button>
                                )}
                            </div>
                        </div>

                        {/* Visual Stats / Tech Feel */}
                        <div className="hidden md:block relative">
                            <div className="w-64 h-80 bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-white/5 p-4 flex flex-col gap-4 rotate-3 hover:rotate-0 transition-transform duration-500">
                                <div className="h-40 bg-gray-700/50 rounded-xl overflow-hidden relative">
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <ScanLine size={48} className="text-brand-500/50 animate-pulse" />
                                    </div>
                                    {/* Fake Data Lines */}
                                    <div className="absolute bottom-2 left-2 right-2 flex justify-between">
                                        <span className="h-1 w-8 bg-brand-500 rounded-full"></span>
                                        <span className="h-1 w-12 bg-gray-600 rounded-full"></span>
                                    </div>
                                </div>
                                <div className="flex-1 flex flex-col justify-between">
                                    <div className="space-y-2">
                                        <div className="h-2 w-3/4 bg-gray-700 rounded-full"></div>
                                        <div className="h-2 w-1/2 bg-gray-700 rounded-full"></div>
                                    </div>
                                    <div className="flex justify-between items-center text-xs text-gray-400 font-mono">
                                        <span>ACCURACY</span>
                                        <span className="text-brand-400">98.5%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Features Grid - Darker/Cleaner */}
                <div className="grid md:grid-cols-3 gap-6">
                    {[
                        { title: 'Visão Computacional', desc: 'Identifica gordura e desvios posturais.', icon: <ScanEye size={24} className="text-blue-400" /> },
                        { title: 'Hiper-Personalização', desc: 'Cada grama de carbo calculada para VOCÊ.', icon: <BrainCircuit size={24} className="text-brand-400" /> },
                        { title: 'Evolução Constante', desc: 'Refaça a análise a cada 30 dias.', icon: <TrendingUp size={24} className="text-emerald-400" /> },
                    ].map((feat, i) => (
                        <div key={i} className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                            <div className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mb-4 text-gray-900 border border-gray-100">
                                {feat.icon}
                            </div>
                            <h3 className="font-bold text-gray-900 mb-2">{feat.title}</h3>
                            <p className="text-sm text-gray-500 leading-relaxed">{feat.desc}</p>
                        </div>
                    ))}
                </div>

                {/* Social Proof / Trust Strip */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 mt-12">
                    {[
                        { label: "Protocolos Gerados", value: "10k+" },
                        { label: "Precisão da IA", value: "98%" },
                        { label: "Tempo Médio", value: "30 seg" },
                        { label: "Avaliação", value: "4.9/5" },
                    ].map((stat, i) => (
                        <div key={i} className="text-center p-6 bg-white rounded-3xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
                            <p className="text-3xl font-black text-gray-900 mb-1">{stat.value}</p>
                            <p className="text-xs font-bold text-gray-400 uppercase tracking-wider">{stat.label}</p>
                        </div>
                    ))}
                </div>

            </div>
        );
    }

    // ─────────────────────────────────────────────────────────────────────────────
    // STATE 2: COACH RESULT (CONTENT ONLY, HISTORY IS IN MAIN SIDEBAR)
    // ─────────────────────────────────────────────────────────────────────────────

    // 🔒 FREE PLAN LOCK
    if (!isPaid) {
        return (
            <div className="w-full animate-in fade-in duration-500">
                <div className="bg-gray-900 rounded-3xl border border-gray-800 p-12 text-center h-[500px] flex flex-col items-center justify-center relative overflow-hidden group">
                    <div className="absolute inset-0 bg-brand-900/10"></div>
                    <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-900/20 rounded-full blur-[120px] translate-x-1/2 -translate-y-1/2"></div>

                    <div className="relative z-10 flex flex-col items-center">
                        <div className="w-20 h-20 bg-gray-800/50 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-white/10">
                            <ShieldAlert size={40} className="text-brand-500" />
                        </div>
                        <h3 className="text-2xl font-bold text-white mb-3">Funcionalidade PRO</h3>
                        <p className="text-gray-400 max-w-md mx-auto mb-8 text-lg">
                            O Personal IA está disponível apenas para membros PRO. Desbloqueie todo o potencial do seu corpo agora.
                        </p>

                        <button
                            onClick={() => {
                                // Reduz o active tab para subscription se possível, mas aqui estamos isolados.
                                const subTab = document.querySelector('[data-tab="subscription"]') as HTMLElement;
                                if (subTab) subTab.click();
                                else window.location.reload();
                            }}
                            className="px-8 py-3.5 bg-brand-600 hover:bg-brand-500 text-white rounded-xl font-bold flex items-center gap-2 transition-all shadow-lg hover:shadow-brand-500/20"
                        >
                            <Zap size={20} fill="currentColor" />
                            Fazer Upgrade Agora
                        </button>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="w-full animate-in fade-in duration-500">
            {coachPlan ? (
                <CoachResult data={coachPlan} onReset={() => setCoachPlan(null)} />
            ) : (
                <div className="bg-white rounded-3xl border border-gray-100 p-12 text-center h-[500px] flex flex-col items-center justify-center relative overflow-hidden group">

                    <div className="w-16 h-16 bg-brand-50 rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                        <Activity size={32} className="text-brand-500" />
                    </div>
                    <h3 className="text-lg font-bold text-gray-900 mb-2">Selecione uma análise</h3>
                    <p className="text-gray-500 max-w-sm mx-auto mb-8">
                        Escolha um protocolo no menu lateral ("Coach AI → Histórico") ou gere um novo para transformar seus resultados.
                    </p>

                    <button
                        onClick={() => setIsCoachWizardOpen(true)}
                        className="px-8 py-3 bg-brand-600 hover:bg-brand-500 text-white rounded-xl font-bold flex items-center gap-2 transition-all shadow-lg shadow-brand-200 hover:shadow-brand-300 transform hover:-translate-y-0.5"
                    >
                        <Plus size={20} />
                        Nova Análise com IA
                    </button>
                </div>
            )}
        </div>
    );
};

export default DashboardCoach;
