'use client';

import { useState, useEffect } from 'react';
import { Heart, Gift, PartyPopper, Cake, Star, Sparkles, ArrowLeft, Palette, Gamepad2, Flower2, Gem, Lock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

const GIFTS = [
  {
    id: 'mantita',
    title: 'Mantita con colores',
    meaning: 'Para ir pintando y coloreando en tus días que tienes frío, estamos viendo una peli, o simplemente estamos pasando tiempo juntos coloreando en llamada.',
    icon: Palette,
  },
  {
    id: 'nintendo',
    title: 'Nintendo Switch Sports',
    meaning: 'Para jugar juntos y pasar tiempo de risas, un poquiiiito de deporte, y mucho tiempo de calidad juntos.',
    icon: Gamepad2,
  },
  {
    id: 'lego',
    title: 'Lego de flores',
    meaning: 'Las flores normales se acaban muriendo, y aunque en tu corazoncito se queden, quiero darte unas que puedas tener siempre ahí, como pequeño recuerdo de que mi amor no se agota nunca.',
    icon: Flower2,
  },
  {
    id: 'aretes',
    title: 'Aretes de Pandora de Mickey Mouse',
    meaning: 'Sé que te gustarán, y quedarás preciosa con ellos <3',
    icon: Gem,
  },
  {
    id: 'pagina',
    title: 'Esta Página',
    meaning: 'Para volver a renacer y recordar todos los inicios y la evolución de nuestra relación.',
    icon: Heart,
  },
];

export default function SurpriseBirthdayPage() {
  const [showContent, setShowContent] = useState(false);
  const [openedGifts, setOpenedGifts] = useState<Set<string>>(new Set());

  useEffect(() => {
    // Un pequeño retraso para la animación inicial
    const timer = setTimeout(() => setShowContent(true), 500);
    return () => clearTimeout(timer);
  }, []);

  const toggleGift = (id: string) => {
    const newOpened = new Set(openedGifts);
    if (newOpened.has(id)) {
      newOpened.delete(id);
    } else {
      newOpened.add(id);
    }
    setOpenedGifts(newOpened);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-pink-50 via-white to-purple-50 flex flex-col items-center justify-center p-4 relative overflow-hidden">
      {/* Decorative background elements */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {[...Array(15)].map((_, i) => (
          <div
            key={i}
            className="absolute animate-pulse"
            style={{
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 5}s`,
              opacity: 0.2,
            }}
          >
            {i % 2 === 0 ? <Heart className="text-pink-400 w-8 h-8" /> : <Star className="text-yellow-400 w-6 h-6" />}
          </div>
        ))}
      </div>

      <div className="container max-w-4xl mx-auto relative z-10 py-12">
        <div className="mb-8">
            <Button asChild variant="ghost" className="text-muted-foreground hover:text-primary transition-colors">
                <Link href="/"><ArrowLeft className="mr-2 h-4 w-4" /> Volver al Inicio</Link>
            </Button>
        </div>

        <div className={`transition-all duration-1000 transform ${showContent ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
            <header className="text-center space-y-4 mb-12">
                <div className="inline-flex items-center justify-center p-4 bg-pink-100 rounded-full mb-4 shadow-xl animate-bounce">
                    <Cake className="w-12 h-12 text-pink-600" />
                </div>
                <h1 className="font-headline text-5xl md:text-7xl font-bold text-gradient">¡Feliz Cumpleaños, Anna!</h1>
                <p className="font-body text-xl text-foreground/70 italic">10 de julio — Hoy el mundo es un lugar mejor porque tú estás en él.</p>
            </header>

            <div className="grid md:grid-cols-3 gap-8 mb-16">
                <Card className="bg-white/60 backdrop-blur-sm border-pink-100 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
                    <CardContent className="p-8 text-center">
                        <Gift className="w-10 h-10 text-primary mx-auto mb-4" />
                        <h3 className="font-headline font-bold text-lg mb-2">Un Día Único</h3>
                        <p className="font-body text-sm text-muted-foreground">Porque tú haces que cada día sea extraordinario, pero hoy el mundo entero celebra que existes.</p>
                    </CardContent>
                </Card>
                <Card className="bg-white/60 backdrop-blur-sm border-pink-100 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
                    <CardContent className="p-8 text-center">
                        <PartyPopper className="w-10 h-10 text-secondary mx-auto mb-4" />
                        <h3 className="font-headline font-bold text-lg mb-2">Pide un Deseo</h3>
                        <p className="font-body text-sm text-muted-foreground">Que cada uno de tus sueños encuentre el camino para hacerse realidad, y que yo esté ahí para verlo.</p>
                    </CardContent>
                </Card>
                <Card className="bg-white/60 backdrop-blur-sm border-pink-100 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
                    <CardContent className="p-8 text-center">
                        <Sparkles className="w-10 h-10 text-accent mx-auto mb-4" />
                        <h3 className="font-headline font-bold text-lg mb-2">Brilla Siempre</h3>
                        <p className="font-body text-sm text-muted-foreground">Tu luz ilumina mi vida, incluso en los días más grises. Nunca dejes de ser tú.</p>
                    </CardContent>
                </Card>
            </div>

            {/* Interactive Gifts Section */}
            <section className="mb-20">
              <h2 className="font-headline text-3xl font-bold text-center text-primary mb-10 flex items-center justify-center gap-3">
                 <Gift className="w-8 h-8" /> Tus Regalos de Cumpleaños
              </h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {GIFTS.map((gift) => {
                  const isOpened = openedGifts.has(gift.id);
                  return (
                    <Card 
                      key={gift.id}
                      onClick={() => toggleGift(gift.id)}
                      className={cn(
                        "group cursor-pointer transition-all duration-500 transform border-2 relative overflow-hidden min-h-[250px]",
                        isOpened 
                          ? "bg-white border-pink-200 shadow-xl scale-100" 
                          : "bg-gradient-to-br from-pink-400 to-purple-500 border-white/20 shadow-lg hover:scale-105 active:scale-95"
                      )}
                    >
                      <CardContent className="p-6 h-full flex flex-col items-center justify-center text-center">
                        {!isOpened ? (
                          <div className="space-y-4 animate-in fade-in zoom-in duration-300">
                            <div className="bg-white/20 p-4 rounded-full inline-block backdrop-blur-sm ring-4 ring-white/10 group-hover:ring-white/20 transition-all">
                              <Lock className="w-12 h-12 text-white" />
                            </div>
                            <div>
                              <p className="text-white font-headline font-bold uppercase tracking-[0.2em] text-xs">Regalo Sorpresa</p>
                              <p className="text-white/60 text-[10px] mt-1 uppercase font-body">Haz clic para abrir</p>
                            </div>
                          </div>
                        ) : (
                          <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
                            <div className="bg-pink-100 p-4 rounded-full inline-block shadow-inner">
                              <gift.icon className="w-10 h-10 text-pink-600" />
                            </div>
                            <div>
                              <h4 className="font-headline font-bold text-lg text-foreground mb-2">{gift.title}</h4>
                              <p className="font-body text-sm text-muted-foreground leading-relaxed italic px-2">
                                "{gift.meaning}"
                              </p>
                            </div>
                          </div>
                        )}
                      </CardContent>
                      {/* Decorative Ribbon Effect when closed */}
                      {!isOpened && (
                        <>
                          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-full bg-white/20 z-0"></div>
                          <div className="absolute top-1/2 left-0 -translate-y-1/2 w-full h-1 bg-white/20 z-0"></div>
                        </>
                      )}
                    </Card>
                  );
                })}
              </div>
            </section>

            <section className="bg-white/80 backdrop-blur-md rounded-[3rem] p-10 md:p-20 shadow-2xl border border-pink-100 relative overflow-hidden group">
                <div className="absolute top-0 right-0 w-40 h-40 bg-pink-500/5 rounded-full blur-3xl"></div>
                <div className="absolute bottom-0 left-0 w-40 h-40 bg-purple-500/5 rounded-full blur-3xl"></div>
                
                <div className="max-w-2xl mx-auto text-center space-y-8">
                    <Heart className="w-12 h-12 text-pink-500 fill-pink-500 mx-auto animate-pulse" />
                    <h2 className="font-headline text-3xl md:text-5xl font-bold text-foreground">Mis Palabras Para Ti</h2>
                    
                    <div className="prose prose-lg mx-auto font-body text-foreground/80 leading-relaxed italic">
                        <p>
                          "Para Anna, mi persona favorita en el universo entero. Hoy, en tu cumpleaños, he querido que este rincón digital fuera un reflejo de lo mucho que te amo."
                        </p>
                        <p>
                          [Aquí va tu dedicatoria especial: Puedes escribir sobre cómo cambió tu vida desde que la conociste, los momentos favoritos que habéis compartido o tus deseos para su nuevo año de vida. Deja que tu corazón dicte las palabras.]
                        </p>
                        <p>
                          "Que este año que hoy comienzas esté lleno de risas, de viajes (¡ya sabes que tenemos muchos pendientes!), de recetas deliciosas y de todo el amor que te mereces, que es infinito."
                        </p>
                    </div>

                    <div className="pt-8 flex flex-col items-center gap-4">
                        <p className="font-headline font-bold text-xl text-primary tracking-widest uppercase">Te amo, hoy y siempre.</p>
                        <div className="h-1 w-24 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full"></div>
                    </div>
                </div>
            </section>
        </div>
      </div>
      
      <footer className="mt-12 text-center text-muted-foreground font-body pb-12">
        <p>Hecho con todo mi amor para ti. ❤️</p>
      </footer>
    </div>
  );
}