'use client';
import { useRef, useState, useMemo } from 'react';
import Image from 'next/image';
import PageHeader from '@/components/page-header';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Heart, ArrowUp, ArrowDown } from 'lucide-react';

const anniversariesData = [
  {
    id: 1,
    month: 'Primer Mes',
    title: 'El Comienzo de Todo',
    text: 'Un mes desde que nuestras vidas se cruzaron de la manera más mágica. Cada día a tu lado ha sido un regalo, lleno de risas, complicidad y un amor que no sabía que podía existir.',
    dataAiHint: 'love letter',
  },
  {
    id: 2,
    month: 'Segundo Mes',
    title: 'Construyendo Recuerdos',
    text: 'Dos meses de coleccionar momentos inolvidables. Desde nuestras conversaciones más profundas hasta las bromas más tontas, cada instante contigo es un tesoro.',
    dataAiHint: 'couple smiling',
  },
  {
    id: 3,
    month: 'Tercer Mes',
    title: 'Nuestro Amor Florece',
    text: 'Tres meses y nuestro amor sigue creciendo, como un jardín en primavera. Me encanta la forma en que nos entendemos sin palabras y cómo nos apoyamos en cada paso.',
    dataAiHint: 'flower garden',
  },
  {
    id: 4,
    month: 'Cuarto Mes',
    title: 'Más Allá de las Palabras',
    text: 'Cuatro meses en los que hemos demostrado que lo nuestro es real y fuerte. Superamos distancias y desafíos, y nuestro vínculo solo se ha hecho más profundo.',
    dataAiHint: 'couple holding hands',
  },
  {
    id: 5,
    month: 'Quinto Mes',
    title: 'Mi Persona Favorita',
    text: 'Cinco meses y no tengo dudas: eres mi persona favorita en todo el universo. Admiro tu fuerza, tu bondad y esa sonrisa que ilumina mi mundo.',
    dataAiHint: 'romantic portrait',
  },
  {
    id: 6,
    month: 'Sexto Mes',
    title: 'Medio Año de Amor',
    text: '¡Seis meses! Medio año de pura felicidad a tu lado. Parece que fue ayer cuando todo empezó, y sin embargo, hemos vivido tanto juntos. Brindo por nuestro futuro.',
    dataAiHint: 'sunset kiss',
  },
  {
    id: 7,
    month: 'Séptimo Mes',
    title: 'La Aventura Continúa',
    text: 'Siete meses y la aventura es cada vez más emocionante. Cada día contigo es una nueva página de nuestro libro, llena de amor, respeto y sueños compartidos.',
    dataAiHint: 'mountain landscape',
  },
];

const AnniversaryCard = ({ anniversary }: { anniversary: (typeof anniversariesData)[0] }) => {
  const cardRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;
    const { left, top, width, height } = cardRef.current.getBoundingClientRect();
    const x = e.clientX - left;
    const y = e.clientY - top;
    const rotateX = (y / height - 0.5) * -10;
    const rotateY = (x / width - 0.5) * 10;

    cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    cardRef.current.style.transition = 'transform 0.1s ease-out';
  };

  const handleMouseLeave = () => {
    if (cardRef.current) {
      cardRef.current.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
      cardRef.current.style.transition = 'transform 0.6s ease-in-out';
    }
  };

  const id = `${anniversary.month.toLowerCase().split(' ').join('-')}`;

  return (
    <div
      ref={cardRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ transition: 'transform 0.6s ease-in-out' }}
    >
      <Card id={id} className="shadow-lg border bg-card/80 backdrop-blur-sm flex flex-col h-full">
        <div className="relative w-full aspect-square">
            <Image
            src={`https://placehold.co/600x600.png`}
            alt={anniversary.title}
            fill
            className="w-full h-full object-cover"
            data-ai-hint={anniversary.dataAiHint}
            />
        </div>
        <div className="flex flex-col flex-grow">
            <CardHeader>
            <div className="flex items-center text-primary mb-1">
                <Heart className="w-5 h-5 mr-2" />
                <span className="font-headline text-lg text-card-foreground">{anniversary.month}</span>
            </div>
            <CardTitle className="font-headline text-xl text-card-foreground">
                {anniversary.title}
            </CardTitle>
            </CardHeader>
            <CardContent className="flex-grow">
            <p className="font-body text-sm text-foreground/80">
                {anniversary.text}
            </p>
            </CardContent>
        </div>
      </Card>
    </div>
  );
};


export default function AnniversariesPage() {
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
  
  const sortedAnniversaries = useMemo(() => {
    return [...anniversariesData].sort((a, b) => {
      if (sortOrder === 'asc') {
        return a.id - b.id;
      } else {
        return b.id - a.id;
      }
    });
  }, [sortOrder]);
  
  const toggleSortOrder = () => {
    setSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));
  };

  return (
    <div className="bg-transparent min-h-screen text-foreground">
      <PageHeader
        title="Nuestros Aniversarios"
        description="Celebrando cada mes de nuestro viaje juntos. Un brindis por el amor que no deja de crecer."
      />

      <main className="container mx-auto px-4 pb-8 md:pb-10 max-w-6xl">
        <div className="flex justify-end mb-8">
            <Button onClick={toggleSortOrder} variant="outline" className="bg-card/80 backdrop-blur-sm">
                Ordenar por mes
                {sortOrder === 'asc' ? <ArrowDown className="ml-2 h-4 w-4" /> : <ArrowUp className="ml-2 h-4 w-4" />}
            </Button>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {sortedAnniversaries.map((anniversary) => (
            <AnniversaryCard key={anniversary.id} anniversary={anniversary} />
          ))}
        </div>
      </main>
    </div>
  );
}