"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Apple, Filter, Flame, TrendingDown, TrendingUp } from 'lucide-react';

const recipeDatabase = [
  {
    id: "1",    name: "Grilled Chicken Breast with Quinoa",    category: "Protein",    calories: 450,
    protein: 45,
    carbs: 35,
    fats: 12,
    prepTime: "25 min",    goals: ["muscle-gain"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Grilled Chicken with Quinoa"
  },
  {
    id: "2",    name: "Veggie Stir-Fry with Tofu",    category: "Vegetarian",    calories: 280,
    protein: 18,
    carbs: 42,
    fats: 8,
    prepTime: "20 min",    goals: ["weight-loss"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Veggie Stir-Fry"
  },
  {
    id: "3",    name: "Salmon with Sweet Potato",    category: "Fish",    calories: 520,
    protein: 38,
    carbs: 48,
    fats: 18,
    prepTime: "30 min",    goals: ["muscle-gain"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Salmon with Sweet Potato"
  },
  {
    id: "4",    name: "Egg White Omelet with Veggies",    category: "Breakfast",    calories: 180,
    protein: 22,
    carbs: 12,
    fats: 4,
    prepTime: "15 min",    goals: ["weight-loss", "muscle-gain"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Egg White Omelet"
  },
  {
    id: "5",    name: "Turkey Meatballs with Zucchini Noodles",    category: "Protein",    calories: 320,
    protein: 35,
    carbs: 18,
    fats: 10,
    prepTime: "28 min",    goals: ["weight-loss"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Turkey Meatballs"
  },
  {
    id: "6",    name: "Lean Beef with Brown Rice",    category: "Protein",    calories: 580,
    protein: 42,
    carbs: 58,
    fats: 14,
    prepTime: "35 min",    goals: ["muscle-gain"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Lean Beef with Rice"
  },
  {
    id: "7",    name: "Green Salad with Grilled Chicken",    category: "Salad",    calories: 280,
    protein: 32,
    carbs: 22,
    fats: 6,
    prepTime: "18 min",    goals: ["weight-loss"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Green Salad"
  },
  {
    id: "8",    name: "High-Protein Pasta with Lean Ground Meat",    category: "Pasta",    calories: 480,
    protein: 40,
    carbs: 52,
    fats: 8,
    prepTime: "25 min",    goals: ["muscle-gain"],
    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "High-Protein Pasta"
  }
];

export default function RecipesPage() {
  const [selectedGoal, setSelectedGoal] = useState<"all" | "weight-loss" | "muscle-gain">("all");

  const filteredRecipes = selectedGoal === "all" 
    ? recipeDatabase 
    : recipeDatabase.filter(recipe => recipe.goals.includes(selectedGoal));

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "Treino", id: "training" },
            { name: "Receitas", id: "/recipes" },
            { name: "Comunidade", id: "community" },
            { name: "Perfil", id: "profile" }
          ]}
          button={{ text: "Começar Agora", href: "contact" }}
          brandName="FitFlow Pro"
        />
      </div>

      <div id="recipes-hero" data-section="recipes-hero">
        <HeroSplitKpi
          title="Receitas Inteligentes Alinhadas com Suas Metas"
          description="Acesso a um banco de receitas nutricionais desenvolvidas por especialistas. Cada receita é otimizada para seu objetivo: perda de peso ou ganho de massa muscular."
          tag="Nutrição Estratégica"
          tagIcon={Flame}
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "100+", label: "Receitas Disponíveis" },
            { value: "2", label: "Filtros por Objetivo" },
            { value: "4.8★", label: "Avaliação Média" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png"
          imageAlt="Dashboard de receitas nutricionais"
          imagePosition="right"
          mediaAnimation="slide-up"
          buttons={[
            { text: "Explorar Receitas", href: "#recipes-grid" }
          ]}
        />
      </div>

      <div id="recipes-filter" data-section="recipes-filter">
        <FeatureCardTwentyFive
          title="Filtre Receitas por Objetivo"
          description="Selecione seu objetivo atual e o sistema recomendará as melhores receitas para atingir suas metas nutricionais e de transformação corporal."
          tag="Recomendação Inteligente"
          tagIcon={Filter}
          features={[
            {
              title: "Perda de Peso",              description: "Receitas com déficit calórico otimizado. Alto em proteína para preservar músculos, baixo em carboidratos estratégicos. Ideal para queimar gordura mantendo a força.",              icon: TrendingDown,
              mediaItems: [
                {
                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Receitas para perda de peso"
                },
                {
                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  alt: "Progresso de déficit calórico"
                }
              ]
            },
            {
              title: "Ganho de Massa",              description: "Receitas com superávit calórico controlado. Proteína máxima (2g por kg), carboidratos pré e pós-treino, gorduras saudáveis. Perfeito para crescimento muscular.",              icon: TrendingUp,
              mediaItems: [
                {
                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Receitas para ganho de massa"
                },
                {
                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  alt: "Progresso de ganho muscular"
                }
              ]
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="recipes-grid" data-section="recipes-grid">
        <div className="w-full py-20">
          <div className="max-w-7xl mx-auto px-6">
            <div className="flex flex-col items-center gap-8 mb-16">
              <div className="text-center">
                <h2 className="text-4xl font-extrabold mb-4">Receitas Recomendadas</h2>
                <p className="text-lg text-foreground/75">Selecione seu objetivo para ver receitas personalizadas</p>
              </div>
              <div className="flex gap-4 flex-wrap justify-center">
                <button
                  onClick={() => setSelectedGoal("all")}
                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
                    selectedGoal === "all"
                      ? "bg-primary-cta text-white"
                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
                  }`}
                >
                  Todas as Receitas
                </button>
                <button
                  onClick={() => setSelectedGoal("weight-loss")}
                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
                    selectedGoal === "weight-loss"
                      ? "bg-primary-cta text-white"
                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
                  }`}
                >
                  Perda de Peso
                </button>
                <button
                  onClick={() => setSelectedGoal("muscle-gain")}
                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
                    selectedGoal === "muscle-gain"
                      ? "bg-primary-cta text-white"
                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
                  }`}
                >
                  Ganho de Massa
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredRecipes.map(recipe => (
                <div key={recipe.id} className="bg-card rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                  <div className="relative h-64 overflow-hidden">
                    <img
                      src={recipe.imageSrc}
                      alt={recipe.imageAlt}
                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-6">
                    <div className="flex items-start justify-between mb-3">
                      <h3 className="text-xl font-bold text-foreground">{recipe.name}</h3>
                      <span className="text-xs font-semibold bg-primary-cta/20 text-primary-cta px-3 py-1 rounded-full">
                        {recipe.category}
                      </span>
                    </div>
                    <p className="text-sm text-foreground/75 mb-4">Tempo: {recipe.prepTime}</p>
                    
                    <div className="grid grid-cols-4 gap-2 mb-4">
                      <div className="text-center">
                        <p className="text-xs text-foreground/60">Calorias</p>
                        <p className="font-bold text-foreground">{recipe.calories}</p>
                      </div>
                      <div className="text-center">
                        <p className="text-xs text-foreground/60">Proteína</p>
                        <p className="font-bold text-foreground">{recipe.protein}g</p>
                      </div>
                      <div className="text-center">
                        <p className="text-xs text-foreground/60">Carbs</p>
                        <p className="font-bold text-foreground">{recipe.carbs}g</p>
                      </div>
                      <div className="text-center">
                        <p className="text-xs text-foreground/60">Gordura</p>
                        <p className="font-bold text-foreground">{recipe.fats}g</p>
                      </div>
                    </div>

                    <div className="flex flex-wrap gap-2">
                      {recipe.goals.includes("weight-loss") && (
                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Perda</span>
                      )}
                      {recipe.goals.includes("muscle-gain") && (
                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Ganho</span>
                      )}
                    </div>

                    <button className="w-full mt-4 bg-primary-cta text-white font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
                      Ver Detalhes
                    </button>
                  </div>
                </div>
              ))}
            </div>

            {filteredRecipes.length === 0 && (
              <div className="text-center py-12">
                <p className="text-lg text-foreground/75">Nenhuma receita encontrada para este objetivo.</p>
              </div>
            )}
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: "Produto",              items: [
                { label: "Dashboard", href: "dashboard" },
                { label: "Treino", href: "training" },
                { label: "Receitas", href: "/recipes" },
                { label: "Cardio Hub", href: "cardio" }
              ]
            },
            {
              title: "Comunidade",              items: [
                { label: "Comunidade", href: "community" },
                { label: "Perfil", href: "profile" },
                { label: "Rankings", href: "rankings" },
                { label: "Blog", href: "blog" }
              ]
            },
            {
              title: "Empresa",              items: [
                { label: "Sobre", href: "about" },
                { label: "Contato", href: "contact" },
                { label: "Privacidade", href: "privacy" },
                { label: "Termos", href: "terms" }
              ]
            }
          ]}
          logoText="FitFlow Pro"
          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
        />
      </div>
    </ThemeProvider>
  );
}
