'use client';

import { useState } from 'react';
import { useAutenticacion } from '@/proveedores/autenticacion';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Mail, Save, User as UserIcon, Trash2 } 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 { Input } from '@/components/ui/input';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { MyReservationsTab } from '@/components/profile/MyReservationsTab';
import { Separator } from '@/components/ui/separator';
import { apiClient } from '@/servicios/api-client';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { useRouter } from 'next/navigation';

const settingsSchema = z.object({
  nombre: z.string().min(1, 'El nombre no puede estar vacío.'),
  apellido: z.string().min(1, 'El apellido no puede estar vacío.'),
});

function SettingsTab() {
  const { usuario, cerrarSesion } = useAutenticacion();
  const { toast } = useToast();
  const router = useRouter();
  const [isSaving, setIsSaving] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const form = useForm<z.infer<typeof settingsSchema>>({
    resolver: zodResolver(settingsSchema),
    defaultValues: {
      nombre: usuario?.nombre || '',
      apellido: usuario?.apellido || '',
    },
  });

  const onSubmit = async (values: z.infer<typeof settingsSchema>) => {
    if (!usuario) return;
    setIsSaving(true);
    
    try {
      await apiClient.put('/api/usuarios/yo', { 
        nombre: values.nombre, 
        apellido: values.apellido 
      });

      toast({
        title: '¡Perfil actualizado!',
        description: 'Tus cambios han sido guardados.',
      });
    } catch (error: any) {
      console.error("Error updating profile:", error);
      toast({
        title: 'Error',
        description: error.message || 'No se pudo actualizar el perfil.',
        variant: 'destructive',
      });
    } finally {
        setIsSaving(false);
    }
  };
  
  const handleDeleteAccount = async () => {
    if (!usuario) return;
    setIsDeleting(true);

    try {
      // TODO: Delete user account via API
      // await apiClient.delete(`/usuarios/${usuario.id}`);

      toast({
        title: "Cuenta Eliminada",
        description: "Tu cuenta ha sido eliminada permanentemente.",
      });
      
      await cerrarSesion();
      router.push('/');

    } catch (error: any) {
      console.error("Error deleting account:", error);
      toast({
        title: 'Error al eliminar la cuenta',
        description: error.message || 'Ocurrió un problema inesperado.',
        variant: 'destructive',
      });
    } finally {
      setIsDeleting(false);
    }
  }


  return (
    <Card>
      <CardHeader>
        <CardTitle>Configuración de la Cuenta</CardTitle>
        <CardDescription>Administra los detalles de tu cuenta y otras configuraciones.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-8">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="nombre"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nombre</FormLabel>
                  <FormControl>
                    <Input placeholder="Tu nombre" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="apellido"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Apellido</FormLabel>
                  <FormControl>
                    <Input placeholder="Tu apellido" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
             <FormItem>
                <FormLabel>Correo Electrónico</FormLabel>
                <FormControl>
                    <Input disabled value={usuario?.correo || ''} />
                </FormControl>
             </FormItem>

            <Button type="submit" disabled={isSaving}>
              <Save className="mr-2 h-4 w-4" />
              {isSaving ? 'Guardando...' : 'Guardar Cambios'}
            </Button>
          </form>
        </Form>
        
        <Separator />

        <div className="space-y-4 rounded-lg border border-destructive p-4">
          <h3 className="font-semibold text-lg text-destructive">Zona de Peligro</h3>
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between">
            <div>
              <p className="font-medium">Eliminar cuenta</p>
              <p className="text-sm text-muted-foreground">
                Una vez que elimines tu cuenta, no hay vuelta atrás. Por favor, asegúrate.
              </p>
            </div>
             <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="destructive" className="mt-2 sm:mt-0">
                  <Trash2 className="mr-2 h-4 w-4" />
                  Eliminar Cuenta
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>¿Estás absolutamente seguro?</AlertDialogTitle>
                  <AlertDialogDescription>
                    Esta acción no se puede deshacer. Esto eliminará permanentemente tu cuenta y
                    tus datos de nuestros servidores.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel disabled={isDeleting}>Cancelar</AlertDialogCancel>
                  <AlertDialogAction
                    onClick={handleDeleteAccount}
                    disabled={isDeleting}
                    className="bg-destructive hover:bg-destructive/90"
                  >
                    {isDeleting ? "Eliminando..." : "Sí, eliminar cuenta"}
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}


export default function ProfilePage() {
  const { usuario, cargando } = useAutenticacion();

  if (cargando) {
    return <div>Cargando perfil...</div>;
  }

  if (!usuario) {
    return <div>Inicia sesión para ver tu perfil.</div>;
  }

  const userInitial = usuario.nombre ? usuario.nombre.charAt(0).toUpperCase() : (usuario.correo ? usuario.correo.charAt(0).toUpperCase() : '?');

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="flex flex-col md:flex-row items-center gap-6 md:gap-8 mb-12">
        <div className="relative">
          <Avatar className="w-24 h-24 md:w-32 md:h-32 border-4 border-primary">
            <AvatarImage src={undefined} alt="Foto de perfil" />
            <AvatarFallback className="text-4xl">{userInitial}</AvatarFallback>
          </Avatar>
        </div>
        <div>
          <h1 className="text-3xl md:text-4xl font-bold font-headline">{usuario.nombre || 'Usuario de Point'}</h1>
          <p className="text-muted-foreground flex items-center gap-2 mt-2"><Mail className="h-4 w-4"/> {usuario.correo}</p>
        </div>
      </div>
      
      <Tabs defaultValue="reservations">
        <TabsList className="mb-6 grid w-full grid-cols-2 h-auto p-2">
          <TabsTrigger value="reservations">Mis Reservas</TabsTrigger>
          <TabsTrigger value="settings">Configuración</TabsTrigger>
        </TabsList>
        <TabsContent value="reservations">
          <MyReservationsTab />
        </TabsContent>
        <TabsContent value="settings">
          <SettingsTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}