import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Sparkles, ArrowRight } from "lucide-react";
import { MetabolicForm } from "@/components/MetabolicForm";
import { ResultsDisplay } from "@/components/ResultsDisplay";
import { ProductSelector } from "@/components/ProductSelector";
import { toast } from "@/hooks/use-toast";
import heroBg from "@/assets/hero-bg.jpg";

const Index = () => {
  const [step, setStep] = useState<'products' | 'form' | 'results'>('products');
  const [selectedProducts, setSelectedProducts] = useState<string[]>([]);
  const [metabolicData, setMetabolicData] = useState({
    bmr: 0,
    calories: 0,
    protein: 0,
    carbs: 0,
    fats: 0,
  });

  const handleProductToggle = (productId: string) => {
    setSelectedProducts(prev => 
      prev.includes(productId)
        ? prev.filter(id => id !== productId)
        : [...prev, productId]
    );
  };

  const handleContinueToForm = () => {
    if (selectedProducts.length === 0) {
      toast({
        title: "Selecione ao menos um produto",
        description: "Escolha os produtos que deseja incluir no seu plano.",
        variant: "destructive"
      });
      return;
    }
    setStep('form');
  };

  const calculateMetabolics = (data: { age: number; height: number; weight: number }) => {
    // Fórmula de Harris-Benedict para mulheres
    const bmr = 447.593 + (9.247 * data.weight) + (3.098 * data.height) - (4.330 * data.age);
    
    // Para perda de peso: déficit de 20%
    const calories = bmr * 1.2 * 0.8;
    
    // Macros: 30% proteína, 40% carbs, 30% gordura
    const protein = (calories * 0.30) / 4; // 4 cal/g
    const carbs = (calories * 0.40) / 4; // 4 cal/g
    const fats = (calories * 0.30) / 9; // 9 cal/g

    setMetabolicData({
      bmr,
      calories,
      protein,
      carbs,
      fats,
    });
    setStep('results');
    
    toast({
      title: "Cálculo concluído!",
      description: "Suas recomendações personalizadas estão prontas.",
    });
  };

  return (
    <div className="min-h-screen bg-gradient-subtle">
      {/* Hero Section */}
      <div 
        className="relative h-[50vh] bg-cover bg-center flex items-center justify-center overflow-hidden"
        style={{ backgroundImage: `url(${heroBg})` }}
      >
        <div className="absolute inset-0 bg-gradient-to-b from-background/70 to-background" />
        <div className="relative z-10 text-center px-4 space-y-4">
          <div className="flex items-center justify-center gap-3 mb-4">
            <Sparkles className="w-10 h-10 text-primary animate-pulse" />
            <h1 className="text-5xl md:text-6xl font-bold bg-gradient-primary bg-clip-text text-transparent">
              Seu Plano de Emagrecimento
            </h1>
          </div>
          <p className="text-xl text-foreground/90 max-w-2xl font-medium">
            Descubra as quantidades ideais dos melhores produtos naturais para emagrecer com saúde
          </p>
        </div>
      </div>

      {/* Main Content */}
      <div className="container mx-auto px-4 py-16 max-w-6xl">
        {/* Step 1: Product Selection */}
        {step === 'products' && (
          <>
            <ProductSelector 
              selectedProducts={selectedProducts}
              onProductToggle={handleProductToggle}
            />
            
            {selectedProducts.length > 0 && (
              <div className="flex justify-center mt-8 animate-fade-in">
                <Button
                  onClick={handleContinueToForm}
                  variant="gradient"
                  size="xl"
                  className="gap-2"
                >
                  Continuar com {selectedProducts.length} {selectedProducts.length === 1 ? 'produto' : 'produtos'}
                  <ArrowRight className="w-5 h-5" />
                </Button>
              </div>
            )}

            {/* Info Card */}
            <div className="mt-12 p-8 bg-gradient-card rounded-2xl shadow-elegant border border-border">
              <h3 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
                <Sparkles className="w-5 h-5 text-primary" />
                Por que esses produtos funcionam?
              </h3>
              <ul className="space-y-3 text-muted-foreground">
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span><strong>Termogênicos naturais</strong> que aceleram seu metabolismo</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span><strong>Fibras que aumentam</strong> a saciedade e reduzem o apetite</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span><strong>Antioxidantes potentes</strong> que auxiliam na queima de gordura</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary font-bold">✓</span>
                  <span><strong>Diuréticos naturais</strong> que combatem o inchaço</span>
                </li>
              </ul>
            </div>
          </>
        )}

        {/* Step 2: Personal Data Form */}
        {step === 'form' && (
          <div className="max-w-2xl mx-auto">
            <Button
              variant="ghost"
              onClick={() => setStep('products')}
              className="mb-6"
            >
              ← Voltar para seleção
            </Button>
            
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-foreground mb-2">
                Agora seus dados pessoais
              </h2>
              <p className="text-muted-foreground">
                Vamos calcular as quantidades perfeitas para você
              </p>
            </div>
            
            <MetabolicForm onCalculate={calculateMetabolics} />
          </div>
        )}

        {/* Step 3: Results */}
        {step === 'results' && (
          <div className="max-w-4xl mx-auto">
            <Button
              variant="ghost"
              onClick={() => setStep('products')}
              className="mb-6"
            >
              ← Novo cálculo
            </Button>
            
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold bg-gradient-primary bg-clip-text text-transparent mb-2">
                Seu Plano Personalizado
              </h2>
              <p className="text-muted-foreground">
                Recomendações calculadas especialmente para você
              </p>
            </div>
            
            <ResultsDisplay 
              {...metabolicData}
              selectedProducts={selectedProducts}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default Index;