'use client';

import { movies } from '@/lib/data';
import Image from 'next/image';
import Link from 'next/link';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { PlayCircle, Calendar } from 'lucide-react';


export default function MoviesPage() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold font-headline tracking-tight">Estrenos de Películas</h1>
        <p className="mt-4 text-lg text-muted-foreground">Explora nuestra colección de los últimos y más grandes éxitos de taquilla.</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
        {movies.map((movie) => (
          <Card key={movie.id} className="flex flex-col overflow-hidden shadow-lg hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-2">
            <CardHeader className="p-0 relative">
              <Image
                src={movie.posterUrl}
                alt={`Poster for ${movie.title}`}
                width={500}
                height={750}
                className="w-full h-auto object-cover"
                data-ai-hint={movie.imageHint}
              />
            </CardHeader>
            <CardContent className="p-4 flex-grow">
              <CardTitle className="font-headline text-xl mb-1">{movie.title}</CardTitle>
              <CardDescription className="text-sm text-muted-foreground">{movie.genre}</CardDescription>
              <p className="mt-3 text-sm line-clamp-3">{movie.synopsis}</p>
            </CardContent>
            <CardFooter className="p-4 pt-0 grid grid-cols-2 gap-2">
              <Dialog>
                <DialogTrigger asChild>
                  <Button variant="outline" className="w-full group transition-all duration-300 ease-in-out">
                    <PlayCircle className="mr-2 h-5 w-5 group-hover:animate-pulse" />
                    Trailer
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[625px] bg-card">
                  <DialogHeader>
                    <DialogTitle>{movie.title}</DialogTitle>
                    <DialogDescription>
                      Video del trailer.
                    </DialogDescription>
                  </DialogHeader>
                  <div className="aspect-video bg-muted rounded-md flex items-center justify-center">
                     <iframe
                        className="w-full h-full"
                        src={movie.trailerUrl.replace("watch?v=", "embed/")}
                        title="YouTube video player"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                      ></iframe>
                  </div>
                </DialogContent>
              </Dialog>
              <Button asChild className="w-full group transition-all duration-300 ease-in-out">
                <Link href={`/booking?movieId=${movie.id}`}>
                  <Calendar className="mr-2 h-5 w-5" />
                  Reservar Sala
                </Link>
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
}