"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { AppLayout } from "@/components/app-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { toast } from "sonner"
import { authService } from "@/lib/api/auth.service"
import type { User } from "@/lib/api/types"
import { Loader2 } from "lucide-react"

export default function PerfilPage() {
    const router = useRouter()
    const [user, setUser] = useState<User | null>(null)
    const [isLoading, setIsLoading] = useState(true)

    // Form states
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [isUpdatingProfile, setIsUpdatingProfile] = useState(false)

    // Password states
    const [currentPassword, setCurrentPassword] = useState("")
    const [newPassword, setNewPassword] = useState("")
    const [confirmPassword, setConfirmPassword] = useState("")
    const [isUpdatingPassword, setIsUpdatingPassword] = useState(false)

    useEffect(() => {
        const fetchUserData = async () => {
            try {
                const response = await authService.getMe()
                setUser(response.user)
                setName(response.user.name || "")
                setEmail(response.user.email)
            } catch (error) {
                toast.error("Error al cargar los datos del perfil")
                router.push("/login")
            } finally {
                setIsLoading(false)
            }
        }

        fetchUserData()
    }, [router])

    const handleUpdateProfile = async (e: React.FormEvent) => {
        e.preventDefault()
        if (!name || !email) {
            toast.error("El nombre y correo son obligatorios")
            return
        }

        setIsUpdatingProfile(true)
        try {
            const response = await authService.updateProfile({ name, email })
            setUser(response.user)
            toast.success(response.message || "Perfil actualizado correctamente")

            // Actualizar el user en localstorage para el AppHeader
            const currentUserStr = localStorage.getItem("user")
            if (currentUserStr) {
                const currentUser = JSON.parse(currentUserStr)
                localStorage.setItem("user", JSON.stringify({ ...currentUser, name: response.user.name, email: response.user.email }))
            }
        } catch (error: any) {
            toast.error(error.message || "Error al actualizar el perfil")
        } finally {
            setIsUpdatingProfile(false)
        }
    }

    const handleUpdatePassword = async (e: React.FormEvent) => {
        e.preventDefault()

        if (!currentPassword || !newPassword || !confirmPassword) {
            toast.error("Todos los campos de contraseña son obligatorios")
            return
        }

        if (newPassword !== confirmPassword) {
            toast.error("La nueva contraseña y la confirmación no coinciden")
            return
        }

        if (newPassword.length < 6) {
            toast.error("La contraseña debe tener al menos 6 caracteres")
            return
        }

        setIsUpdatingPassword(true)
        try {
            const response = await authService.updatePassword({
                current_password: currentPassword,
                password: newPassword,
                password_confirmation: confirmPassword
            })
            toast.success(response.message || "Contraseña actualizada correctamente")
            setCurrentPassword("")
            setNewPassword("")
            setConfirmPassword("")
        } catch (error: any) {
            toast.error(error.message || "Error al actualizar la contraseña")
        } finally {
            setIsUpdatingPassword(false)
        }
    }

    const getInitials = (nameStr: string) => {
        if (!nameStr) return "U"
        return nameStr
            .split(" ")
            .map((n) => n[0])
            .join("")
            .toUpperCase()
            .slice(0, 2)
    }

    if (isLoading) {
        return (
            <AppLayout>
                <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                </div>
            </AppLayout>
        )
    }

    return (
        <AppLayout user={user ? { name: user.name || "", email: user.email, role: user.rol === "editor" ? "edicion" : user.rol === "lector" ? "lectura" : "admin" } : undefined}>
            <div className="min-h-screen bg-background p-6 lg:p-8">
                <div className="mx-auto max-w-4xl space-y-6">
                    <div>
                        <h1 className="text-3xl font-semibold tracking-tight text-foreground">Mi Perfil</h1>
                        <p className="mt-1 text-sm text-muted-foreground">
                            Administre su información personal y preferencias
                        </p>
                    </div>

                    <div className="grid gap-6 md:grid-cols-[240px_1fr]">
                        <div className="flex flex-col gap-6">
                            <Card>
                                <CardContent className="flex flex-col items-center gap-4 p-6">
                                    <Avatar className="h-24 w-24">
                                        <AvatarImage src="/placeholder.svg" />
                                        <AvatarFallback className="text-2xl">{getInitials(user?.name || "")}</AvatarFallback>
                                    </Avatar>
                                    <div className="text-center">
                                        <h3 className="font-semibold">{user?.name}</h3>
                                        <p className="text-sm text-muted-foreground capitalize">{user?.rol || "Usuario"}</p>
                                    </div>
                                </CardContent>
                            </Card>
                        </div>

                        <div className="flex flex-col gap-6">
                            <Card>
                                <form onSubmit={handleUpdateProfile}>
                                    <CardHeader>
                                        <CardTitle>Información Personal</CardTitle>
                                        <CardDescription>
                                            Actualice sus datos de contacto
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="grid gap-2">
                                            <Label htmlFor="name">Nombre completo</Label>
                                            <Input
                                                id="name"
                                                value={name}
                                                onChange={(e) => setName(e.target.value)}
                                                required
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="email">Correo electrónico</Label>
                                            <Input
                                                id="email"
                                                type="email"
                                                value={email}
                                                onChange={(e) => setEmail(e.target.value)}
                                                required
                                            />
                                        </div>
                                        <div className="flex justify-end pt-2">
                                            <Button type="submit" disabled={isUpdatingProfile}>
                                                {isUpdatingProfile ? (
                                                    <>
                                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                                        Guardando...
                                                    </>
                                                ) : "Guardar cambios"}
                                            </Button>
                                        </div>
                                    </CardContent>
                                </form>
                            </Card>

                            <Card>
                                <form onSubmit={handleUpdatePassword}>
                                    <CardHeader>
                                        <CardTitle className="text-destructive">Seguridad / Contraseña</CardTitle>
                                        <CardDescription>
                                            Cambie su contraseña de acceso
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="grid gap-2">
                                            <Label htmlFor="current_password">Contraseña actual</Label>
                                            <Input
                                                id="current_password"
                                                type="password"
                                                value={currentPassword}
                                                onChange={(e) => setCurrentPassword(e.target.value)}
                                                required
                                            />
                                        </div>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="grid gap-2">
                                                <Label htmlFor="new_password">Nueva contraseña</Label>
                                                <Input
                                                    id="new_password"
                                                    type="password"
                                                    value={newPassword}
                                                    onChange={(e) => setNewPassword(e.target.value)}
                                                    required
                                                    minLength={6}
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="confirm_password">Confirmar contraseña</Label>
                                                <Input
                                                    id="confirm_password"
                                                    type="password"
                                                    value={confirmPassword}
                                                    onChange={(e) => setConfirmPassword(e.target.value)}
                                                    required
                                                    minLength={6}
                                                />
                                            </div>
                                        </div>
                                        <div className="flex justify-end pt-2">
                                            <Button type="submit" variant="destructive" disabled={isUpdatingPassword}>
                                                {isUpdatingPassword ? (
                                                    <>
                                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                                        Actualizando...
                                                    </>
                                                ) : "Actualizar contraseña"}
                                            </Button>
                                        </div>
                                    </CardContent>
                                </form>
                            </Card>
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    )
}