import { useState } from "react";
import { router } from "@inertiajs/react";
import { LogOut, ShieldCheck } from "lucide-react";
import {
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";
import { useMobileNavigation } from "@/hooks/use-mobile-navigation";
import { useInitials } from "@/hooks/use-initials";
import { logout } from "@/routes";
import type { User as UserType } from "@/types";

type Props = {
    user: UserType & {
        avatar?: string;
        role?: { name?: string } | null;
    };
};

export function UserMenuContent({ user }: Props) {
    const cleanup = useMobileNavigation();
    const getInitials = useInitials();
    const [showLogoutDialog, setShowLogoutDialog] = useState(false);
    const [isLoading, setIsLoading] = useState(false);

    const handleConfirmLogout = () => {
        setIsLoading(true);
        cleanup();
        router.post(
            logout(),
            {},
            {
                onFinish: () => setIsLoading(false),
                onSuccess: () => {
                    router.flushAll();
                },
            },
        );
    };

    return (
        <>
            {/* Header Profil User */}
            <DropdownMenuLabel className="p-3 font-normal">
                <div className="flex items-center gap-3">
                    <Avatar className="h-10 w-10 border border-slate-200 shadow-sm">
                        <AvatarImage src={user?.avatar} alt={user?.name} />
                        <AvatarFallback className="bg-slate-900 text-xs font-semibold text-white">
                            {getInitials(user?.name ?? "")}
                        </AvatarFallback>
                    </Avatar>
                    <div className="flex flex-col space-y-0.5 overflow-hidden text-left">
                        <p className="truncate text-sm font-semibold text-slate-900">
                            {user?.name}
                        </p>
                        <p className="truncate text-xs text-slate-500">
                            {user?.email}
                        </p>
                        {user?.role?.name && (
                            <div className="mt-1 flex items-center gap-1">
                                <span className="inline-flex items-center rounded-md bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
                                    <ShieldCheck className="mr-0.5 h-3 w-3" />
                                    {user.role.name}
                                </span>
                            </div>
                        )}
                    </div>
                </div>
            </DropdownMenuLabel>

            <DropdownMenuSeparator />

            {/* Tombol Logout */}
            <div className="p-1">
                <DropdownMenuItem
                    className="cursor-pointer rounded-lg py-2 text-red-600 focus:bg-red-50 focus:text-red-700"
                    onSelect={(e) => {
                        e.preventDefault();
                        setShowLogoutDialog(true);
                    }}
                >
                    <LogOut className="mr-2.5 h-4 w-4" />
                    <span className="text-sm font-medium">Keluar</span>
                </DropdownMenuItem>
            </div>

            {/* Modal Dialog Konfirmasi Logout */}
            <ConfirmDeleteDialog
                open={showLogoutDialog}
                onOpenChange={setShowLogoutDialog}
                onConfirm={handleConfirmLogout}
                title="Konfirmasi Keluar"
                description="Apakah Anda yakin ingin keluar dari aplikasi ? Sesi aktif Anda akan diakhiri."
                confirmText="Ya, Keluar"
                loadingText="Proses..."
                loading={isLoading}
            />
        </>
    );
}