import React, {useContext, useEffect, useRef, useState} from "react";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import AvatarIcon from "@/components/ui/AvatarIcon";
import {removeCookie} from '@/lib/utils/cookies';
import {isDesktop} from '@/lib/configs';
import * as tauri from '@/lib/tauri';
import {useTranslations} from '@/lib/i18n';

export default function UserMenu(): React.JSX.Element {
    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
    const t = useTranslations();

    const profileMenuRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
    
    const [isProfileMenuOpen, setIsProfileMenuOpen] = useState<boolean>(false);

    function handleProfileClick(): void {
        setIsProfileMenuOpen(!isProfileMenuOpen);
    }

    useEffect((): () => void => {
        function handleClickOutside(event: MouseEvent): void {
            if (profileMenuRef.current && event.target instanceof Node && !profileMenuRef.current.contains(event.target)) {
                setIsProfileMenuOpen(false);
            }
        }

        if (isProfileMenuOpen) {
            document.addEventListener("mousedown", handleClickOutside);
        }

        return (): void => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [isProfileMenuOpen]);

    function handleLogout(): void {
        removeCookie("token");
        if (isDesktop) {
            tauri.logout();
        } else {
            document.location.href = "https://eritors.com/login";
        }
    }

    return (
        <div className="relative" data-guide="user-dropdown" ref={profileMenuRef}>
            <button
                className="bg-secondary hover:bg-gray-dark p-1.5 rounded-full transition-colors duration-150 flex items-center border border-secondary hover:border-primary"
                onClick={session.user ? handleProfileClick : (): void => {
                    document.location.href = "/login";
                }}
            >
                {
                    session.user && (
                        <AvatarIcon
                            size="xs"
                            initial={session.user.username?.charAt(0).toUpperCase() ?? ''}
                        />
                    )
                }
            </button>
            {isProfileMenuOpen && (
                <div
                    className="absolute right-0 mt-3 w-56 bg-tertiary rounded-xl py-2 z-[100] border border-secondary backdrop-blur-sm animate-fadeIn">
                    <div
                        className="px-4 py-3 border-b border-secondary bg-gradient-to-r from-primary/10 to-transparent">
                        <p className="text-text-primary font-bold text-sm tracking-wide">{session.user?.username}</p>
                        <p className="text-text-secondary text-xs mt-0.5">{session.user?.email}</p>
                    </div>
                    <a href="https://eritors.com/settings"
                       className="group flex items-center gap-3 px-4 py-2.5 text-text-primary hover:bg-secondary transition-all hover:pl-5">
                        <span
                            className="text-sm font-medium group-hover:text-primary transition-colors">{t("userMenu.settings")}</span>
                    </a>
                    <a onClick={handleLogout} href="#"
                       className="group flex items-center gap-3 px-4 py-2.5 text-error hover:bg-error/10 transition-all hover:pl-5 rounded-b-xl">
                        <span className="text-sm font-medium">{t("userMenu.logout")}</span>
                    </a>
                </div>
            )}
        </div>
    )
}