'use client';

import { useMemo, useState, useEffect } from 'react';
import { useAutenticacion } from '@/proveedores/autenticacion';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Trash2, MoreHorizontal, Pencil, AlertCircle } from 'lucide-react';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';
import { cn } from '@/lib/utils';
import { useToast } from '@/hooks/use-toast';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from '../ui/button';
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '../ui/dialog';
import { BookingForm } from '../shared/BookingForm';
import { apiClient } from '@/servicios/api-client';

type Reservation = {
    id: string;
    titulo_pelicula?: string;
    titulo_personalizado?: string;
    pelicula_id: string;
    fecha_inicio: string;
    estado: 'pending' | 'confirmed' | 'rejected' | 'completed';
    motivo_rechazo?: string;
};

export function MyReservationsTab() {
  const { usuario, cargando } = useAutenticacion();
  const { toast } = useToast();
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [selectedReservation, setSelectedReservation] = useState<Reservation | null>(null);
  const [reservations, setReservations] = useState<Reservation[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (usuario?.id) {
      loadReservations();
    }
  }, [usuario?.id]);

  const loadReservations = async () => {
    try {
      setIsLoading(true);
      // TODO: Implementar endpoint para obtener reservaciones del usuario
      // const data = await apiClient.get(`/reservaciones/usuario/${usuario?.id}`);
      // setReservations(data);
    } catch (error) {
      console.error('Error cargando reservaciones:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const getStatus = (estado: Reservation['estado'], fechaInicio: string) => {
    if (estado === 'completed' || (estado !== 'rejected' && estado !== 'pending' && new Date() > new Date(fechaInicio))) {
        return 'Completada';
    }
    switch (status) {
        case 'pending': return 'Pendiente';
        case 'confirmed': return 'Confirmada';
        case 'rejected': return 'Rechazada';
        default: return 'Desconocido';
    }
  }

  const getStatusVariant = (status: ReturnType<typeof getStatus>) => {
     switch (status) {
        case 'Confirmada': return 'default';
        case 'Completada': return 'secondary';
        case 'Pendiente': return 'outline';
        case 'Rechazada': return 'destructive';
        default: return 'secondary';
    }
  }
  
  const getStatusClass = (status: ReturnType<typeof getStatus>) => {
    switch (status) {
        case 'Confirmada': return 'bg-green-500/20 text-green-300 border-green-500/30 hover:bg-green-500/30';
        case 'Completada': return 'bg-gray-500/20 text-gray-300 border-gray-500/30';
        case 'Pendiente': return 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30';
        case 'Rechazada': return 'bg-red-500/20 text-red-300 border-red-500/30';
        default: return '';
    }
  }


  const handleCancelReservation = async (reservationId: string) => {
    try {
      await apiClient.delete(`/api/reservaciones/${reservationId}`);
      toast({
        title: 'Reserva Cancelada',
        description: 'Tu reserva ha sido cancelada exitosamente.',
        variant: 'default',
      });
      // Recargar reservaciones
      await loadReservations();
    } catch (error) {
      console.error('Error cancelando reserva:', error);
      toast({
        title: 'Error',
        description: 'No se pudo cancelar la reserva.',
        variant: 'destructive',
      });
    }
  };

  const handleEditClick = (reservation: Reservation) => {
    setSelectedReservation(reservation);
    setIsEditDialogOpen(true);
  }

  if (isLoading) {
    return (
        <div className="text-center p-8">
            <p>Cargando tus reservas...</p>
        </div>
    );
  }

  return (
    <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <Card>
        <CardHeader>
            <CardTitle>Historial de Reservas</CardTitle>
            <CardDescription>Aquí puedes ver tus reservas pasadas y futuras.</CardDescription>
        </CardHeader>
        <CardContent className="p-0">
            <Table>
            <TableHeader>
                <TableRow>
                <TableHead className="w-[35%]">Artículo</TableHead>
                <TableHead>Fecha y Hora</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                {reservations && reservations.map((res: Reservation) => {
                const status = getStatus(res.estado, res.fecha_inicio);
                const canModify = status === 'Confirmada' || status === 'Pendiente';
                const isRejected = status === 'Rechazada';

                return (
                    <TableRow key={res.id}>
                    <TableCell className="font-medium">{res.titulo_pelicula || res.titulo_personalizado}</TableCell>
                    <TableCell>{format(new Date(res.fecha_inicio), 'PPP p', { locale: es })}</TableCell>
                    <TableCell>
                        <div className="flex items-center gap-2">
                        <Badge
                            variant={getStatusVariant(status)}
                            className={cn('capitalize', getStatusClass(status))}
                        >
                            {status}
                        </Badge>
                        {isRejected && res.rejectionReason && (
                             <TooltipProvider>
                                <Tooltip>
                                    <TooltipTrigger>
                                        <AlertCircle className="h-4 w-4 text-destructive" />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                        <p>Motivo: {res.rejectionReason}</p>
                                    </TooltipContent>
                                </Tooltip>
                             </TooltipProvider>
                        )}
                        </div>
                    </TableCell>
                    <TableCell className="text-right">
                        <AlertDialog>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Abrir menú</span>
                                <MoreHorizontal className="h-4 w-4" />
                            </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => handleEditClick(res)} disabled={!canModify}>
                                <Pencil className="mr-2 h-4 w-4" />
                                Modificar
                            </DropdownMenuItem>
                            <AlertDialogTrigger asChild>
                                <DropdownMenuItem 
                                className="text-red-400 focus:text-red-400 focus:bg-red-500/10"
                                disabled={!canModify}
                                >
                                <Trash2 className="mr-2 h-4 w-4" />
                                Cancelar
                                </DropdownMenuItem>
                            </AlertDialogTrigger>
                            </DropdownMenuContent>
                        </DropdownMenu>

                        <AlertDialogContent>
                            <AlertDialogHeader>
                            <AlertDialogTitle>¿Estás seguro?</AlertDialogTitle>
                            <AlertDialogDescription>
                                Esta acción no se puede deshacer. Esto cancelará permanentemente tu reserva.
                            </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                            <AlertDialogCancel>Volver</AlertDialogCancel>
                            <AlertDialogAction 
                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                onClick={() => handleCancelReservation(res.id)}
                            >
                                Sí, cancelar
                            </AlertDialogAction>
                            </AlertDialogFooter>
                        </AlertDialogContent>
                        </AlertDialog>
                    </TableCell>
                    </TableRow>
                )
                })}
                {reservations && reservations.length === 0 && (
                <TableRow>
                    <TableCell colSpan={5} className="text-center h-24">No tienes ninguna reserva.</TableCell>
                </TableRow>
                )}
            </TableBody>
            </Table>
        </CardContent>
        </Card>
        
        {selectedReservation && (
            <DialogContent className="sm:max-w-2xl bg-card/95 backdrop-blur-sm">
                 <DialogTitle>Editar Reservación</DialogTitle>
                 <BookingForm
                    isEditing={true}
                    reservation={selectedReservation}
                    onBookingCreated={() => setIsEditDialogOpen(false)}
                 />
            </DialogContent>
        )}
    </Dialog>
  );
}