'use client';

import { useState, useEffect } from 'react';
import { Calendar, Heart, MapPin, Clock, Camera, Utensils, MessagesSquare, BarChart, History, Music, WandSparkles, Quote, Sparkles, Cake, ArrowRight } from 'lucide-react';
import Countdown from '@/components/countdown';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import Timeline from '@/components/timeline';
import { photos, recipes, trips, quienEsQuienQuestions, specialMessages } from '@/lib/data';
import AnimatedDigit from '@/components/animated-digit';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import Image from 'next/image';

const FloatingShape = ({ shape, className, style }: { shape: 'heart' | 'circle', className?: string, style?: React.CSSProperties }) => {
    if (shape === 'heart') {
        return <div className={`heart-shape ${className}`} style={style}></div>
    }
    return <div className={`bokeh-circle ${className}`} style={style}></div>
}

const StatCard = ({ icon, value, label }: { icon: React.ReactNode, value: number, label: string }) => (
    <div className="bg-card/80 backdrop-blur-sm shadow-lg rounded-xl p-6 text-center transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
        <div className="flex justify-center mb-3">{icon}</div>
        <div className="text-3xl md:text-4xl font-bold text-foreground">{value}</div>
        <p className="text-xs md:text-sm text-foreground/70 font-body mt-1">{label}</p>
    </div>
);

export default function Home() {
  const { days, hours, minutes, seconds } = Countdown();
  const [randomMessage, setRandomMessage] = useState('');

  useEffect(() => {
    const randomIndex = Math.floor(Math.random() * specialMessages.length);
    setRandomMessage(specialMessages[randomIndex]);
  }, []);

  const stats = [
    {
        icon: <Camera className="w-8 h-8 text-primary" />,
        value: photos.length,
        label: 'Fotos Compartidas',
    },
    {
        icon: <Utensils className="w-8 h-8 text-primary" />,
        value: recipes.length,
        label: 'Recetas Cocinadas',
    },
    {
        icon: <MapPin className="w-8 h-8 text-primary" />,
        value: trips.length,
        label: 'Viajes Juntos',
    },
    {
        icon: <MessagesSquare className="w-8 h-8 text-primary" />,
        value: quienEsQuienQuestions.length,
        label: 'Juegos y Retos',
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Birthday Surprise Alert Section */}
      <section className="container mx-auto px-4 mt-8 animate-in slide-in-from-top duration-700">
        <Link href="/sorpresa-cumple">
          <Card className="bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-pink-500/10 border-pink-200/50 hover:border-pink-300 transition-all cursor-pointer group relative overflow-hidden shadow-sm">
            <CardContent className="py-5 flex items-center justify-between gap-4">
              <div className="flex items-center gap-4 relative z-10">
                <div className="bg-pink-100 p-3 rounded-full animate-bounce shadow-inner">
                  <Cake className="w-6 h-6 text-pink-600" />
                </div>
                <div>
                  <p className="font-headline font-bold text-pink-900 text-lg">¡Feliz Cumpleaños, Anna! 🎂</p>
                  <p className="text-sm text-pink-700/80 font-body">Hoy es 10 de julio y todo este rincón celebra tu vida. Haz clic aquí para ver tu sorpresa.</p>
                </div>
              </div>
              <div className="flex items-center gap-2 relative z-10 text-pink-500 font-bold group-hover:gap-3 transition-all">
                <span>Descubrir Sorpresa</span>
                <ArrowRight className="w-5 h-5" />
              </div>
              {/* Background decorative icons */}
              <div className="absolute -right-6 -bottom-6 opacity-10 group-hover:scale-110 transition-transform">
                 <Cake className="w-32 h-32 rotate-12" />
              </div>
            </CardContent>
          </Card>
        </Link>
      </section>

      {/* Hero Section */}
      <div className="relative overflow-hidden pt-12 pb-16 md:pt-24 md:pb-24">
          <div className="absolute inset-0 z-0 pointer-events-none">
              <FloatingShape shape="circle" className="bg-pink-300 w-48 h-48" style={{ top: '10%', left: '15%', animationDelay: '0s' }} />
              <FloatingShape shape="circle" className="bg-purple-300 w-32 h-32" style={{ bottom: '10%', right: '15%', animationDelay: '2s' }} />
              <FloatingShape shape="heart" style={{ top: '15%', right: '40%', animationDelay: '1s' }} />
              <FloatingShape shape="heart" style={{ bottom: '25%', left: '30%', animationDelay: '3s' }} />
              <FloatingShape shape="heart" style={{ top: '50%', right: '10%', animationDelay: '5s' }} />
          </div>

          <div className="container mx-auto px-4 text-center relative z-10">
              <div className='flex justify-center items-center gap-4 mb-6 animate-in fade-in-down duration-500'>
                  <div className="relative w-20 h-20">
                      <div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-secondary/30 rounded-full blur-2xl opacity-50 animate-pulse"></div>
                      <Heart className="w-20 h-20 text-gradient drop-shadow-xl animate-heart-beat fill-[url(#heart-gradient-hero)] stroke-none relative z-10" />
                      <svg width="0" height="0">
                          <defs>
                              <linearGradient id="heart-gradient-hero" x1="0%" y1="0%" x2="100%" y2="100%">
                                  <stop offset="0%" style={{ stopColor: 'hsl(var(--primary))' }} />
                                  <stop offset="100%" style={{ stopColor: 'hsl(var(--secondary))' }} />
                              </linearGradient>
                          </defs>
                      </svg>
                  </div>
              </div>

              <h1 className="text-5xl md:text-8xl lg:text-9xl font-bold font-headline mb-4 animate-in fade-in-down duration-700 delay-100">
                  <span className="text-gradient">Anna & Adrián</span>
              </h1>
              <p className="text-xl md:text-3xl text-foreground/80 font-body mb-8 animate-in fade-in-down duration-700 delay-200 tracking-tight">
                  Construyendo un futuro, paso a paso, <span className="text-primary font-bold">corazón a corazón.</span>
              </p>

              <div className="flex flex-col md:flex-row justify-center items-center gap-4 mb-10 animate-in fade-in-up duration-700 delay-300">
                  <div className="flex items-center gap-2 bg-white/50 backdrop-blur-md p-3 px-8 rounded-full shadow-lg border border-white/20 hover:scale-105 transition-transform cursor-default">
                      <Calendar className="w-5 h-5 text-primary" />
                      <span className="font-body text-sm md:text-base text-foreground font-bold">4 de enero, 2025</span>
                  </div>
                  <div className="flex items-center gap-2 bg-white/50 backdrop-blur-md p-3 px-8 rounded-full shadow-lg border border-white/20 hover:scale-105 transition-transform cursor-default">
                      <MapPin className="w-5 h-5 text-secondary" />
                      <span className="font-body text-sm md:text-base text-foreground font-bold">BAQ ↔ PMI</span>
                  </div>
              </div>
          </div>
      </div>
      
      <main className="container mx-auto px-4 pb-20">
          {/* Welcome Message */}
          <section className="mb-24 text-center max-w-4xl mx-auto px-4">
              <div className="bg-white/40 backdrop-blur-xl p-8 md:p-16 rounded-[2.5rem] border border-white/40 shadow-2xl relative overflow-hidden group">
                  <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-colors"></div>
                  <Quote className="absolute top-8 left-8 w-16 h-16 text-primary/5 -rotate-12" />
                  <h2 className="text-3xl md:text-5xl font-headline font-bold text-foreground mb-8">Un Rincón para Nosotros</h2>
                  <p className="text-lg md:text-2xl text-foreground/80 font-body leading-relaxed max-w-3xl mx-auto italic">
                      "He creado este espacio para que cada risa, cada aventura y cada kilómetro que nos separa se convierta en un recuerdo que brille para siempre. Eres mi hogar, sin importar en qué parte del mapa estemos."
                  </p>
                  <div className="mt-8 flex justify-center gap-2">
                    <Heart className="w-6 h-6 text-primary fill-primary" />
                    <Heart className="w-6 h-6 text-secondary fill-secondary" />
                    <Heart className="w-6 h-6 text-accent fill-accent" />
                  </div>
                  <Quote className="absolute bottom-8 right-8 w-16 h-16 text-secondary/5 rotate-12" />
              </div>
          </section>

          {/* Random Note Section */}
          {randomMessage && (
            <section className="mb-24 animate-in fade-in duration-1000">
                <div className="max-w-2xl mx-auto text-center">
                    <div className="inline-flex items-center gap-2 mb-6 px-6 py-2 bg-secondary/10 text-secondary rounded-full font-body text-sm font-bold border border-secondary/20 shadow-sm">
                        <Heart className="w-4 h-4 fill-current animate-pulse" />
                        Mensaje Sorpresa
                    </div>
                    <Card className="border-none bg-gradient-to-br from-white to-pink-50 shadow-2xl overflow-hidden relative group">
                        <div className="absolute top-0 left-0 w-2 h-full bg-secondary"></div>
                        <CardContent className="p-8 md:p-12 italic font-body text-xl md:text-2xl text-foreground/80 group-hover:scale-[1.02] transition-transform duration-500">
                            "{randomMessage}"
                        </CardContent>
                    </Card>
                </div>
            </section>
          )}

          {/* Countdown Section */}
          <section className="mb-24">
              <div className="text-center mb-12 animate-in fade-in-down duration-500">
                  <h2 className="font-headline text-3xl md:text-5xl font-bold text-gradient flex items-center justify-center gap-4">
                      <Clock className="w-10 h-10 text-foreground animate-spin-slow"/>
                      Nuestro Tiempo Juntos
                  </h2>
                  <p className="mt-3 font-body text-lg text-foreground/70">Cada latido es un segundo más a tu lado</p>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 max-w-4xl mx-auto">
                  <div className="bg-white/60 backdrop-blur-md shadow-xl rounded-2xl p-8 text-center animate-in fade-in-up duration-500 delay-100 border border-white/20 hover:shadow-2xl transition-all">
                      <AnimatedDigit value={days} />
                      <p className="text-xs text-foreground/50 font-body uppercase tracking-[0.2em] mt-3 font-bold">Días</p>
                  </div>
                  <div className="bg-white/60 backdrop-blur-md shadow-xl rounded-2xl p-8 text-center animate-in fade-in-up duration-500 delay-200 border border-white/20 hover:shadow-2xl transition-all">
                      <AnimatedDigit value={hours} />
                      <p className="text-xs text-foreground/50 font-body uppercase tracking-[0.2em] mt-3 font-bold">Horas</p>
                  </div>
                  <div className="bg-white/60 backdrop-blur-md shadow-xl rounded-2xl p-8 text-center animate-in fade-in-up duration-500 delay-300 border border-white/20 hover:shadow-2xl transition-all">
                      <AnimatedDigit value={minutes} />
                      <p className="text-xs text-foreground/50 font-body uppercase tracking-[0.2em] mt-3 font-bold">Minutos</p>
                  </div>
                  <div className="bg-white/60 backdrop-blur-md shadow-xl rounded-2xl p-8 text-center animate-in fade-in-up duration-500 delay-400 border border-white/20 hover:shadow-2xl transition-all">
                      <AnimatedDigit value={seconds} />
                      <p className="text-xs text-foreground/50 font-body uppercase tracking-[0.2em] mt-3 font-bold">Segundos</p>
                  </div>
              </div>
          </section>

          {/* Stats Section */}
          <section className="mb-24">
              <div className="text-center mb-12">
                  <h2 className="font-headline text-3xl md:text-5xl font-bold text-gradient flex items-center justify-center gap-4">
                      <BarChart className="w-10 h-10 text-foreground"/>
                      Nuestro Inventario de Amor
                  </h2>
                  <p className="mt-3 font-body text-lg text-foreground/70">Cifras que solo cuentan una parte de lo vivido</p>
              </div>
              <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-10 max-w-6xl mx-auto">
                  {stats.map((stat, index) => (
                      <div className="animate-in fade-in zoom-in-95 duration-500" style={{ animationDelay: `${100 * (index + 1)}ms` }} key={index}>
                          <StatCard icon={stat.icon} value={stat.value} label={stat.label} />
                      </div>
                  ))}
              </div>
          </section>

          {/* AI Date Planner Shortcut */}
          <section className="mb-24 animate-in fade-in-up duration-700">
             <div className="max-w-5xl mx-auto bg-gradient-to-br from-primary via-indigo-600 to-accent rounded-[3rem] shadow-2xl p-8 md:p-16 text-center text-white relative overflow-hidden group">
                <div className="absolute top-0 right-0 w-80 h-80 bg-white/10 rounded-full -mr-20 -mt-20 blur-3xl group-hover:bg-white/20 transition-all duration-700"></div>
                <div className="absolute bottom-0 left-0 w-64 h-64 bg-black/10 rounded-full -ml-16 -mb-16 blur-2xl"></div>
                
                <div className="relative z-10 flex flex-col items-center">
                    <div className="bg-white/20 p-6 rounded-[2rem] backdrop-blur-md mb-8 animate-bounce shadow-xl">
                        <WandSparkles className="w-12 h-12 text-white" />
                    </div>
                    <h2 className="font-headline text-4xl md:text-6xl font-bold mb-6">¿Cuál es el Siguiente Plan?</h2>
                    <p className="font-body text-white/90 text-lg md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
                        Deja que la magia organice nuestra próxima aventura virtual o presencial.
                    </p>
                    <Button asChild size="lg" variant="secondary" className="font-headline text-xl px-12 h-16 rounded-2xl shadow-2xl hover:scale-110 transition-all bg-white text-primary hover:bg-white/90 border-none">
                        <Link href="/juegos/planeador-de-citas">Crear una Cita Mágica</Link>
                    </Button>
                </div>
            </div>
          </section>

          {/* Music Section */}
          <section className="mb-24 animate-in fade-in-up duration-700">
              <div className="text-center mb-12">
                  <h2 className="font-headline text-3xl md:text-5xl font-bold text-gradient flex items-center justify-center gap-4">
                      <Music className="w-10 h-10 text-foreground animate-pulse"/>
                      Ritmo Compartido
                  </h2>
                  <p className="mt-3 font-body text-lg text-foreground/70">La banda sonora de nuestros mejores días</p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-6xl mx-auto">
                  <div className="shadow-2xl rounded-3xl overflow-hidden hover:scale-[1.01] transition-transform border border-white/20">
                    <iframe 
                      data-testid="embed-iframe" 
                      style={{borderRadius: '0px'}} 
                      src="https://open.spotify.com/embed/playlist/2fKD85F7ITUg2w4PwuzWal?utm_source=generator" 
                      width="100%" 
                      height="400" 
                      frameBorder="0" 
                      allowFullScreen={true} 
                      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
                      loading="lazy">
                    </iframe>
                  </div>
                  <div className="shadow-2xl rounded-3xl overflow-hidden hover:scale-[1.01] transition-transform border border-white/20">
                     <iframe 
                      data-testid="embed-iframe" 
                      style={{borderRadius: '0px'}} 
                      src="https://open.spotify.com/embed/playlist/2ksHC9jyxZfQ8enPNqbR9B?utm_source=generator" 
                      width="100%" 
                      height="400" 
                      frameBorder="0" 
                      allowFullScreen={true} 
                      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
                      loading="lazy">
                    </iframe>
                  </div>
              </div>
          </section>
          
          {/* Timeline Section */}
          <section className="mb-24 animate-in fade-in-up duration-700">
              <div className="text-center mb-12">
                  <h2 className="font-headline text-3xl md:text-5xl font-bold text-gradient flex items-center justify-center gap-4">
                      <History className="w-10 h-10 text-foreground"/>
                      Nuestra Línea del Tiempo
                  </h2>
                  <p className="mt-3 font-body text-lg text-foreground/70">Hitos que marcaron el camino</p>
              </div>
              <Timeline />
          </section>

          {/* Final Call to Action */}
          <section className="animate-in fade-in-up duration-700 delay-200">
               <div className="max-w-5xl mx-auto bg-white/40 backdrop-blur-2xl rounded-[3rem] shadow-2xl p-10 md:p-20 text-center bg-gradient-to-br from-pink-50 via-white to-blue-50 border border-white/50 relative overflow-hidden group">
                  <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary via-secondary to-accent"></div>
                  <div className="flex justify-center mb-10">
                      <div className="bg-primary/10 p-6 rounded-[2rem] group-hover:rotate-12 transition-transform">
                          <Camera className="w-14 h-14 text-primary" />
                      </div>
                  </div>
                  <h2 className="font-headline text-4xl md:text-7xl font-bold text-gradient mb-6">Sigue Explorando</h2>
                  <p className="font-body text-foreground/80 text-lg md:text-2xl mb-12 max-w-3xl mx-auto leading-relaxed">
                      Cada pestaña es una ventana a un momento especial.
                  </p>
                  <div className="flex flex-col sm:flex-row justify-center items-center gap-8">
                      <Button asChild size="lg" className="w-full sm:w-auto font-headline text-xl h-16 px-12 rounded-2xl shadow-2xl hover:scale-105 transition-all">
                          <Link href="/gallery">Galería de Recuerdos</Link>
                      </Button>
                      <Button asChild size="lg" variant="outline" className="w-full sm:w-auto font-headline text-xl h-16 px-12 rounded-2xl bg-transparent border-2 border-primary/20 hover:border-primary/50 hover:bg-white/50 transition-all">
                          <Link href="/recetas">Nuestro Recetario</Link>
                      </Button>
                  </div>
              </div>
          </section>
      </main>

      <footer className="py-16 text-center text-muted-foreground font-body bg-white/10 border-t border-white/20 backdrop-blur-md">
          <div className="flex justify-center items-center gap-3 mb-4">
            <Heart className="w-5 h-5 text-primary fill-primary" />
            <span className="font-headline font-bold text-foreground">Anna & Adrián</span>
            <Heart className="w-5 h-5 text-secondary fill-secondary" />
          </div>
          <p className="text-sm tracking-widest uppercase">© 2025. Un amor sin fronteras.</p>
      </footer>
    </div>
  );
}