import { useState, lazy } from "react";
import Header from "@/components/Header";
import LazySection from "@/components/LazySection";

const Footer = lazy(() => import("@/components/Footer"));
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Calculator, Search, Star, TrendingUp, Users, Zap, BookOpen, ArrowRight } from "lucide-react";
import "../styles/calculators-animations.css";
import "../styles/home3-animations.css";

const Calculators = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const calculators = [
    {
      name: "Taxa Metabólica Basal (TMB)",
      description: "Calcule seu gasto energético diário com precisão científica usando múltiplas fórmulas validadas",
      icon: "🔥",
      link: "/tmb",
      color: "from-orange-500 to-red-500",
      category: "Metabolismo",
      popular: true,
      difficulty: "Básico"
    },
    {
      name: "Percentual de Gordura Corporal",
      description: "Avalie sua composição corporal com múltiplas fórmulas científicas (Jackson-Pollock, DEXA, etc.)",
      icon: "📏",
      link: "/body-fat",
      color: "from-pink-500 to-rose-500",
      category: "Composição Corporal",
      popular: true,
      difficulty: "Intermediário"
    },
    {
      name: "Frequência Cardíaca Máxima",
      description: "Defina suas zonas de treinamento cardiovascular com precisão científica",
      icon: "❤️",
      link: "/hrmax",
      color: "from-red-500 to-pink-500",
      category: "Cardiovascular",
      popular: false,
      difficulty: "Básico"
    },
    {
      name: "Macronutrientes",
      description: "Distribua proteínas, carboidratos e gorduras idealmente para seus objetivos",
      icon: "🍽️",
      link: "/macros",
      color: "from-green-500 to-emerald-500",
      category: "Nutrição",
      popular: true,
      difficulty: "Intermediário"
    },
    {
      name: "Ciclo de Carboidratos",
      description: "Otimize o timing de carboidratos para maximizar performance e composição corporal",
      icon: "⚡",
      link: "/carb-cycle",
      color: "from-yellow-500 to-orange-500",
      category: "Nutrição",
      popular: false,
      difficulty: "Avançado"
    },
    {
      name: "Hidratação Diária",
      description: "Calcule sua necessidade de água personalizada baseada em atividade e clima",
      icon: "💧",
      link: "/water",
      color: "from-cyan-500 to-blue-500",
      category: "Hidratação",
      popular: false,
      difficulty: "Básico"
    }
  ];

  const categories = ["Todos", "Metabolismo", "Composição Corporal", "Cardiovascular", "Nutrição", "Hidratação"];
  const [selectedCategory, setSelectedCategory] = useState("Todos");

  const filteredCalculators = calculators.filter(calc => {
    const matchesSearch = calc.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         calc.description.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = selectedCategory === "Todos" || calc.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "Básico": return "difficulty-basic-purple";
      case "Intermediário": return "difficulty-intermediate-purple";
      case "Avançado": return "difficulty-advanced-purple";
      default: return "difficulty-basic-purple";
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-950 via-purple-950 to-slate-900">
      <Header />

      {/* Hero + Calculators Unified Section */}
      <section className="relative pt-24 pb-16 overflow-hidden">
        {/* Unified Background Effects */}
        <div className="absolute inset-0 pointer-events-none">
          {/* Gradient Orbs */}
          <div className="absolute -top-32 -left-24 h-[28rem] w-[28rem] rounded-full bg-[radial-gradient(circle,rgba(147,51,234,0.35),transparent_70%)] blur-3xl" />
          <div className="absolute top-1/3 -right-20 h-[30rem] w-[30rem] rounded-full bg-[radial-gradient(circle,rgba(59,130,246,0.32),transparent_70%)] blur-3xl" />
          <div className="absolute bottom-1/4 left-1/4 h-[25rem] w-[25rem] rounded-full bg-[radial-gradient(circle,rgba(236,72,153,0.25),transparent_70%)] blur-3xl" />
          
          {/* Grid Pattern */}
          <div
            className="absolute inset-0 opacity-30"
            style={{
              backgroundImage:
                'linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 90px)'
            }}
          />
          
          {/* Floating Particles */}
          <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-purple-400/40 rounded-full animate-pulse" />
          <div className="absolute top-1/3 right-1/3 w-1.5 h-1.5 bg-blue-400/40 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }} />
          <div className="absolute bottom-1/3 left-1/2 w-2 h-2 bg-pink-400/40 rounded-full animate-pulse" style={{ animationDelay: '1s' }} />
          <div className="absolute top-2/3 right-1/4 w-1 h-1 bg-violet-400/40 rounded-full animate-pulse" style={{ animationDelay: '1.5s' }} />
        </div>

        <div className="container mx-auto px-4 relative z-10">
          {/* Header */}
          <div className="text-center mb-16 mt-[25px]">
            <h1 className="text-4xl lg:text-6xl font-poppins font-bold mb-6 leading-tight text-white">
              Calculadoras <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Científicas</span>
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
              Ferramentas precisas baseadas em fórmulas validadas cientificamente para otimizar seus resultados
            </p>
          </div>

          {/* Calculators Grid */}
          <div className="flex justify-center">
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5 max-w-5xl">
              {[
                {
                  name: "Taxa Metabólica Basal",
                  description: "Calcule seu gasto energético diário com precisão científica",
                  icon: "🔥",
                  link: "/tmb",
                  color: "from-orange-500 to-red-500",
                  popular: true
                },
                {
                  name: "Percentual de Gordura",
                  description: "Avalie sua composição corporal com múltiplas fórmulas",
                  icon: "📊",
                  link: "/body-fat",
                  color: "from-blue-500 to-cyan-500",
                  popular: false
                },
                {
                  name: "Macronutrientes",
                  description: "Distribua proteínas, carboidratos e gorduras de forma inteligente",
                  icon: "🥗",
                  link: "/macros",
                  color: "from-green-500 to-emerald-500",
                  popular: false
                },
                {
                  name: "Frequência Cardíaca",
                  description: "Defina suas zonas de treinamento cardiovascular",
                  icon: "❤️",
                  link: "/hrmax",
                  color: "from-red-500 to-pink-500",
                  popular: false
                },
                {
                  name: "Hidratação Diária",
                  description: "Calcule sua necessidade de água personalizada",
                  icon: "💧",
                  link: "/water",
                  color: "from-cyan-500 to-blue-500",
                  popular: false
                },
                {
                  name: "Ciclo de Carboidratos",
                  description: "Otimize o uso de carboidratos para cada fase do seu treino",
                  icon: "🍚",
                  link: "/carb-cycle",
                  color: "from-yellow-500 to-orange-500",
                  popular: false
                }
              ].map((calc, index) => (
                <div
                  key={index}
                  className="relative group cursor-pointer"
                  onClick={() => window.location.href = calc.link}
                >
                  {calc.popular && (
                    <div className="absolute -top-2 -right-2 z-10">
                      <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-bold">
                        Popular
                      </div>
                    </div>
                  )}
                  
                  <Card className="glass-dark h-full border-white/10 hover:border-white/30 transition-all duration-300 group-hover:bg-white/10">
                    <CardContent className="p-5">
                      <div className="flex items-start gap-4">
                        <div className={`w-12 h-12 rounded-xl bg-gradient-to-r ${calc.color} flex items-center justify-center flex-shrink-0 text-xl group-hover:scale-110 transition-transform duration-300`}>
                          {calc.icon}
                        </div>
                        <div className="flex-1 min-w-0">
                          <h3 className="text-base font-bold text-white leading-tight group-hover:text-white transition-colors">{calc.name}</h3>
                          <p className="text-gray-400 text-xs leading-snug line-clamp-2 group-hover:text-gray-300 transition-colors mt-0.5">{calc.description}</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Important Notice Section */}
      <section className="py-8 px-4 relative">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute -top-32 -left-24 h-[28rem] w-[28rem] rounded-full bg-[radial-gradient(circle,rgba(147,51,234,0.35),transparent_70%)] blur-3xl" />
          <div className="absolute bottom-0 right-0 h-[25rem] w-[25rem] rounded-full bg-[radial-gradient(circle,rgba(236,72,153,0.25),transparent_70%)] blur-3xl" />
          <div
            className="absolute inset-0 opacity-30"
            style={{
              backgroundImage:
                'linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 90px)'
            }}
          />
        </div>
        <div className="max-w-4xl mx-auto relative z-10">
          <div className="rounded-2xl border border-orange-500/30 bg-white/5 backdrop-blur-xl p-6">
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0 w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center mt-0.5">
                <span className="text-white text-sm font-bold">!</span>
              </div>
              <div>
                <h3 className="text-orange-300 font-semibold mb-2">Aviso Importante:</h3>
                <p className="text-gray-300 text-sm leading-relaxed">
                  As calculadoras fornecidas são baseadas em fórmulas científicas validadas, mas os resultados são 
                  estimativos. Para orientação personalizada sobre saúde, nutrição ou condicionamento físico, consulte 
                  sempre profissionais qualificados. Este site não substitui acompanhamento profissional.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 relative">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/2 left-1/4 h-[30rem] w-[30rem] rounded-full bg-[radial-gradient(circle,rgba(59,130,246,0.32),transparent_70%)] blur-3xl" />
          <div className="absolute -bottom-20 -right-20 h-[25rem] w-[25rem] rounded-full bg-[radial-gradient(circle,rgba(147,51,234,0.25),transparent_70%)] blur-3xl" />
          <div
            className="absolute inset-0 opacity-30"
            style={{
              backgroundImage:
                'linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 90px)'
            }}
          />
        </div>
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h2 className="text-3xl font-bold text-white mb-4">
            Precisa de Orientação Personalizada?
          </h2>
          <p className="text-lg text-gray-400 mb-8">
            Nossas calculadoras fornecem estimativas baseadas em ciência. Para resultados otimizados, 
            considere uma consultoria personalizada.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="gap-2 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700">
              <Users className="h-4 w-4" />
              Falar com Especialista
            </Button>
            <Button size="lg" variant="outline" className="gap-2 border-white/20 text-white hover:bg-white/10">
              <TrendingUp className="h-4 w-4" />
              Ver Planos
            </Button>
          </div>
        </div>
      </section>

      <LazySection>
        <Footer />
      </LazySection>
    </div>
  );
};

export default Calculators;