'use client';

import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { movies as initialMovies, Movie } from "@/lib/data";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { MoreHorizontal, PlusCircle, Pencil, Trash2, Save } from "lucide-react";
import Image from "next/image";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog";
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';
import { ScrollArea } from '../ui/scroll-area';
import { uploadService } from '@/servicios/upload-service';
import { useToast } from '@/hooks/use-toast';


export function MoviesAdminTab() {
    const [movies, setMovies] = useState(initialMovies);
    const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
    const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null);
    const [editedMovie, setEditedMovie] = useState<Partial<Movie> | null>(null);
    const [previewImage, setPreviewImage] = useState<string | null>(null);
    const [isUploading, setIsUploading] = useState(false);
    const { toast } = useToast();


    const handleEditClick = (movie: Movie) => {
        setSelectedMovie(movie);
        setEditedMovie({ ...movie });
        setPreviewImage(movie.posterUrl);
        setIsEditDialogOpen(true);
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        if (editedMovie) {
            setEditedMovie({ ...editedMovie, [e.target.name]: e.target.value });
        }
    };
    
    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setIsUploading(true);
            try {
                // Subir imagen al servidor
                const uploadResponse = await uploadService.uploadImage(file);
                
                // Actualizar preview y datos de la película
                setPreviewImage(uploadResponse.url);
                if (editedMovie) {
                    setEditedMovie({ ...editedMovie, posterUrl: uploadResponse.url });
                }
                
                toast({
                    title: '¡Imagen subida!',
                    description: 'La imagen se ha guardado correctamente.',
                });
            } catch (error: any) {
                console.error("Error uploading image:", error);
                toast({
                    title: 'Error',
                    description: error.message || 'No se pudo subir la imagen.',
                    variant: 'destructive',
                });
            } finally {
                setIsUploading(false);
            }
        }
    };

    const handleSaveChanges = () => {
        if (selectedMovie && editedMovie) {
            const updatedMovies = movies.map(m =>
                m.id === selectedMovie.id ? { ...m, ...editedMovie } as Movie : m
            );
            setMovies(updatedMovies);
            
            toast({
                title: '¡Cambios guardados!',
                description: 'La película se ha actualizado correctamente.',
            });
        }
        setIsEditDialogOpen(false);
    };
    
    const handleDialogClose = (open: boolean) => {
        if (!open) {
            setSelectedMovie(null);
            setEditedMovie(null);
            setPreviewImage(null);
        }
        setIsEditDialogOpen(open);
    };


    return (
        <>
            <Card>
                <CardHeader>
                    <div className="flex justify-between items-center">
                        <div>
                            <CardTitle>Gestionar Películas</CardTitle>
                            <CardDescription>Añade, edita o elimina películas de la cartelera.</CardDescription>
                        </div>
                        <Button><PlusCircle className="mr-2" /> Añadir Película</Button>
                    </div>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-20">Póster</TableHead>
                                <TableHead>Título</TableHead>
                                <TableHead>Género</TableHead>
                                <TableHead className="text-right">Acciones</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {movies.map(movie => (
                                <TableRow key={movie.id}>
                                    <TableCell>
                                        <Image src={movie.posterUrl} alt={movie.title} width={40} height={60} className="rounded-md object-cover" />
                                    </TableCell>
                                    <TableCell className="font-medium">{movie.title}</TableCell>
                                    <TableCell>{movie.genre}</TableCell>
                                    <TableCell className="text-right">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button variant="ghost" size="icon"><MoreHorizontal /></Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem onClick={() => handleEditClick(movie)}>
                                                    <Pencil className="mr-2 h-4 w-4" />
                                                    Editar
                                                </DropdownMenuItem>
                                                <DropdownMenuItem className="text-red-400 focus:text-red-400">
                                                    <Trash2 className="mr-2 h-4 w-4" />
                                                    Eliminar
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            <Dialog open={isEditDialogOpen} onOpenChange={handleDialogClose}>
                <DialogContent className="sm:max-w-[625px]">
                    <DialogHeader>
                        <DialogTitle>Editar Película</DialogTitle>
                        <DialogDescription>
                            Realiza cambios en los detalles de la película. Haz clic en guardar cuando termines.
                        </DialogDescription>
                    </DialogHeader>
                    <ScrollArea className="max-h-[60vh] pr-6 -mr-6">
                        {editedMovie && (
                            <div className="grid gap-4 py-4 pr-6">
                                <div className="grid grid-cols-4 items-center gap-4">
                                    <Label htmlFor="title" className="text-right">Título</Label>
                                    <Input id="title" name="title" value={editedMovie.title || ''} onChange={handleInputChange} className="col-span-3" />
                                </div>
                                <div className="grid grid-cols-4 items-center gap-4">
                                    <Label htmlFor="genre" className="text-right">Género</Label>
                                    <Input id="genre" name="genre" value={editedMovie.genre || ''} onChange={handleInputChange} className="col-span-3" />
                                </div>
                                <div className="grid grid-cols-4 items-start gap-4">
                                    <Label htmlFor="synopsis" className="text-right pt-2">Sinopsis</Label>
                                    <Textarea id="synopsis" name="synopsis" value={editedMovie.synopsis || ''} onChange={handleInputChange} className="col-span-3 min-h-[100px]" />
                                </div>
                                <div className="grid grid-cols-4 items-center gap-4">
                                    <Label htmlFor="trailerUrl" className="text-right">URL del Trailer</Label>
                                    <Input id="trailerUrl" name="trailerUrl" value={editedMovie.trailerUrl || ''} onChange={handleInputChange} className="col-span-3" />
                                </div>
                                <div className="grid grid-cols-4 items-start gap-4">
                                <Label htmlFor="poster" className="text-right pt-2">Póster</Label>
                                    <div className="col-span-3 space-y-2">
                                        <Input 
                                            id="poster" 
                                            type="file" 
                                            accept="image/*" 
                                            onChange={handleFileChange}
                                            disabled={isUploading}
                                            className="col-span-3" 
                                        />
                                        {isUploading && <p className="text-sm text-muted-foreground">Subiendo imagen...</p>}
                                        {previewImage && (
                                            <div className="relative w-32 h-48 rounded-md overflow-hidden border">
                                                <Image src={previewImage} alt="Vista previa del póster" layout="fill" objectFit="cover" />
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        )}
                    </ScrollArea>
                    <DialogFooter>
                        <Button type="button" variant="secondary" onClick={() => setIsEditDialogOpen(false)}>Cancelar</Button>
                        <Button type="button" onClick={handleSaveChanges}><Save className="mr-2 h-4 w-4" />Guardar Cambios</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </>
    )
}