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 } from "lucide-react";
import "../styles/calculators-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">
      <Header />

      {/* Calculadoras Científicas Section */}
      <section className="relative z-10 py-20 px-4 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-32">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Calculadoras <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Científicas</span>
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Ferramentas precisas baseadas em fórmulas validadas cientificamente para otimizar seus resultados
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                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"
              >
                {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="bg-white/10 backdrop-blur-md border-white/20 h-full hover:bg-white/20 transition-all duration-500">
                  <CardContent className="p-6">
                    <div className={`w-16 h-16 rounded-full bg-gradient-to-r ${calc.color} flex items-center justify-center mb-4 text-2xl`}>
                      {calc.icon}
                    </div>
                    <h3 className="text-xl font-bold text-white mb-3">{calc.name}</h3>
                    <p className="text-gray-300 text-sm mb-6 leading-relaxed">{calc.description}</p>
                    <Button 
                      className="w-full bg-white/10 hover:bg-white/20 border border-white/20 text-white transition-all duration-300"
                      onClick={() => window.location.href = calc.link}
                    >
                      Calcular Agora
                      <Calculator className="ml-2 h-4 w-4" />
                    </Button>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Important Notice Section */}
      <section className="py-8 px-4">
        <div className="max-w-4xl mx-auto">
          <div className="bg-gradient-to-r from-orange-500/10 to-red-500/10 backdrop-blur-md rounded-2xl p-6 border border-orange-500/20">
            <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>
      <section className="py-16 px-4 bg-gradient-to-r from-primary/5 to-secondary/5">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-foreground mb-4">
            Precisa de Orientação Personalizada?
          </h2>
          <p className="text-lg text-muted-foreground 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">
              <Users className="h-4 w-4" />
              Falar com Especialista
            </Button>
            <Button size="lg" variant="outline" className="gap-2">
              <TrendingUp className="h-4 w-4" />
              Ver Planos
            </Button>
          </div>
        </div>
      </section>

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

export default Calculators;