import { Link, router, usePage } from '@inertiajs/react';
import { useCallback, useEffect, useRef, useState } from 'react';

import { useAdminLanguage } from '@admin/hooks/use-admin-language';
import { headerLanguages } from '@admin/lib/header-languages';
import { siteBrandLogoAlt, siteBrandLogoSrc } from '@admin/lib/site-brand-logo';
import { toggleBrowserFullscreen } from '@admin/lib/synto-header-actions';
import { userHasContentAccess } from '@admin/lib/admin-permissions';
import { cn } from '@admin/lib/utils';
import { UserAvatar } from '@admin/components/ui/user-avatar';
import { type SharedData } from '@/types';

type DropdownId = 'country' | 'notification' | 'profile' | null;

const headerIconBtnClasses =
    'inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10';

const themeBtnClasses =
    'hs-dark-mode group flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10';

export function Header() {
    const { auth, contactNotifications } = usePage<SharedData>().props;
    const { currentLanguage, changeLanguage, ready } = useAdminLanguage();
    const [openMenu, setOpenMenu] = useState<DropdownId>(null);
    const headerNavRef = useRef<HTMLDivElement>(null);

    const closeMenus = useCallback(() => setOpenMenu(null), []);

    useEffect(() => {
        const onKey = (e: KeyboardEvent) => {
            if (e.key === 'Escape') {
                closeMenus();
            }
        };
        document.addEventListener('keydown', onKey);

        return () => document.removeEventListener('keydown', onKey);
    }, [closeMenus]);

    useEffect(() => {
        if (openMenu === null) {
            return;
        }

        const onPointerDown = (e: MouseEvent) => {
            if (headerNavRef.current && !headerNavRef.current.contains(e.target as Node)) {
                setOpenMenu(null);
            }
        };

        document.addEventListener('mousedown', onPointerDown);

        return () => document.removeEventListener('mousedown', onPointerDown);
    }, [openMenu]);

    const toggleMenu = (id: Exclude<DropdownId, null>) => {
        setOpenMenu((current) => (current === id ? null : id));
    };

    const permissions = auth.user?.permissions;
    const canManageContent = userHasContentAccess(permissions);
    const unreadCount = canManageContent ? (contactNotifications?.unreadCount ?? 0) : 0;

    return (
        <>
            <header className="header custom-sticky !top-0 !w-full">
                <nav className="main-header" aria-label="Global">
                    <div className="header-content">
                        <div className="header-left">
                            <div className="">
                                <button type="button" className="sidebar-toggle !w-100 !h-100">
                                    <span className="sr-only">Toggle Navigation</span>
                                    <i className="ri-arrow-right-circle-line header-icon" />
                                </button>
                            </div>
                        </div>

                        <div className="responsive-logo">
                            <Link href={route('dashboard')} className="responsive-logo-dark" aria-label="Brand">
                                <img src={siteBrandLogoSrc} alt={siteBrandLogoAlt} className="site-brand-logo mx-auto" />
                            </Link>
                            <Link href={route('dashboard')} className="responsive-logo-light" aria-label="Brand">
                                <img src={siteBrandLogoSrc} alt={siteBrandLogoAlt} className="site-brand-logo mx-auto" />
                            </Link>
                        </div>

                        <div className="header-right">
                            <div className="responsive-headernav" ref={headerNavRef}>
                                <div className="header-nav-right">
                                    {/* Language — template country dropdown */}
                                    <div
                                        className={`header-country hs-dropdown ti-dropdown relative hidden sm:block${openMenu === 'country' ? ' open' : ''}`}
                                    >
                                        <button
                                            id="dropdown-flag"
                                            type="button"
                                            className={`hs-dropdown-toggle ti-dropdown-toggle ${headerIconBtnClasses} !border-0 p-0 shadow-none`}
                                            onClick={() => toggleMenu('country')}
                                            aria-expanded={openMenu === 'country'}
                                            aria-label={`Language: ${currentLanguage.label}`}
                                        >
                                            <span
                                                className="header-language-flag-emoji text-lg leading-none notranslate"
                                                translate="no"
                                                aria-hidden
                                            >
                                                {ready ? currentLanguage.flag : headerLanguages[0].flag}
                                            </span>
                                        </button>
                                        {openMenu === 'country' && (
                                            <div className="hs-dropdown-menu ti-dropdown-menu min-w-[10rem] absolute end-0 top-full z-50 mt-2 notranslate" translate="no">
                                                <div className="ti-dropdown-divider divide-y divide-gray-200 dark:divide-white/10">
                                                    <div className="py-2 first:pt-0 last:pb-0">
                                                        {headerLanguages.map((language) => (
                                                            <button
                                                                key={language.code}
                                                                type="button"
                                                                className={cn(
                                                                    'ti-dropdown-item language-switcher-item w-full text-start',
                                                                    currentLanguage.code === language.code &&
                                                                        'language-switcher-item--active',
                                                                )}
                                                                onClick={() => {
                                                                    changeLanguage(language.code);
                                                                    closeMenus();
                                                                }}
                                                            >
                                                                <div className="flex items-center space-x-2 rtl:space-x-reverse w-full">
                                                                    <span className="text-base leading-none" aria-hidden>
                                                                        {language.flag}
                                                                    </span>
                                                                    <p className="text-xs font-medium">{language.label}</p>
                                                                    {currentLanguage.code === language.code ? (
                                                                        <i className="ri-check-line ms-auto text-primary" aria-hidden />
                                                                    ) : null}
                                                                </div>
                                                            </button>
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </div>

                                    <div className="header-search">
                                        <button aria-label="Search" type="button" className={headerIconBtnClasses}>
                                            <i className="ri-search-2-line header-icon" />
                                        </button>
                                    </div>

                                    <div className="header-theme-mode hidden sm:block">
                                        <a
                                            aria-label="Switch to dark mode"
                                            className={`${themeBtnClasses} hs-dark-mode-active:hidden flex hs-dark-mode`}
                                            href="#"
                                            data-hs-theme-click-value="dark"
                                            onClick={(event) => event.preventDefault()}
                                        >
                                            <i className="ri-moon-line header-icon" />
                                        </a>
                                        <a
                                            aria-label="Switch to light mode"
                                            className={`${themeBtnClasses} hs-dark-mode-active:flex hidden hs-dark-mode`}
                                            href="#"
                                            data-hs-theme-click-value="light"
                                            onClick={(event) => event.preventDefault()}
                                        >
                                            <i className="ri-sun-line header-icon" />
                                        </a>
                                    </div>

                                    <div className="header-fullscreen hidden lg:block">
                                        <button
                                            aria-label="Toggle fullscreen"
                                            type="button"
                                            className={headerIconBtnClasses}
                                            onClick={() => toggleBrowserFullscreen()}
                                        >
                                            <i className="ri-fullscreen-line header-icon" />
                                        </button>
                                    </div>

                                    {canManageContent && (
                                    <div
                                        className={`header-notification hs-dropdown ti-dropdown relative hidden sm:block${openMenu === 'notification' ? ' open' : ''}`}
                                    >
                                        <button
                                            id="dropdown-notification"
                                            type="button"
                                            className="hs-dropdown-toggle ti-dropdown-toggle p-0 border-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10"
                                            onClick={() => toggleMenu('notification')}
                                            aria-expanded={openMenu === 'notification'}
                                        >
                                            <i className="ri-notification-2-line header-icon animate-bell" />
                                            <span className="flex absolute h-5 w-5 top-0 end-0 -mt-1 -me-1">
                                                <span className="relative inline-flex rounded-full h-5 w-5 bg-success text-white justify-center items-center text-[10px]">
                                                    {unreadCount}
                                                </span>
                                            </span>
                                        </button>
                                        {openMenu === 'notification' && (
                                            <NotificationsDropdown
                                                onClose={closeMenus}
                                                unreadCount={unreadCount}
                                                notes={contactNotifications?.latestUnread ?? []}
                                            />
                                        )}
                                    </div>
                                    )}

                                    <div
                                        className={`header-profile ti-dropdown relative${openMenu === 'profile' ? ' open' : ''}`}
                                    >
                                        <button
                                            id="dropdown-profile"
                                            type="button"
                                            className="hs-dropdown-toggle ti-dropdown-toggle inline-flex items-center justify-center gap-2 p-0 flex-shrink-0 h-8 w-8 rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10"
                                            onClick={(event) => {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                toggleMenu('profile');
                                            }}
                                            aria-expanded={openMenu === 'profile'}
                                            aria-haspopup="true"
                                        >
                                            {auth.user ? (
                                                <UserAvatar
                                                    user={auth.user}
                                                    size="sm"
                                                    className="pointer-events-none"
                                                    ringClassName="ring-2 ring-white dark:ring-white/10"
                                                />
                                            ) : null}
                                        </button>

                                        {openMenu === 'profile' && auth.user && (
                                            <div
                                                className="hs-dropdown-menu ti-dropdown-menu border-0 w-[20rem] absolute end-0 top-full z-50 mt-2"
                                                aria-labelledby="dropdown-profile"
                                            >
                                                <div className="ti-dropdown-header !bg-primary flex">
                                                    <div className="me-3">
                                                        <UserAvatar
                                                            user={auth.user}
                                                            size="md"
                                                            onPrimary
                                                            ringClassName="!ring-transparent"
                                                        />
                                                    </div>
                                                    <div>
                                                        <p className="ti-dropdown-header-title !text-white">
                                                            {auth.user.name}
                                                        </p>
                                                        <p className="ti-dropdown-header-content !text-white/50">
                                                            {auth.user.email}
                                                        </p>
                                                    </div>
                                                </div>
                                                <div className="mt-2 ti-dropdown-divider">
                                                    <Link
                                                        href={route('profile.edit')}
                                                        className="ti-dropdown-item"
                                                        onClick={closeMenus}
                                                    >
                                                        <i className="ti ti-user-circle text-lg" />
                                                        Profile
                                                    </Link>
                                                    <Link
                                                        href={route('password.edit')}
                                                        className="ti-dropdown-item"
                                                        onClick={closeMenus}
                                                    >
                                                        <i className="ti ti-lock text-lg" />
                                                        Password
                                                    </Link>
                                                    <button
                                                        type="button"
                                                        className="ti-dropdown-item w-full text-start"
                                                        onClick={() => {
                                                            closeMenus();
                                                            router.post(route('logout'), {}, { replace: true });
                                                        }}
                                                    >
                                                        <i className="ti ti-logout text-lg" />
                                                        Log out
                                                    </button>
                                                </div>
                                            </div>
                                        )}
                                    </div>

                                    <div className="switcher-icon">
                                        <button
                                            aria-label="Theme switcher"
                                            type="button"
                                            className={`${headerIconBtnClasses} focus-visible:outline-none`}
                                            data-hs-overlay="#hs-overlay-switcher"
                                        >
                                            <i className="ri-settings-5-line header-icon animate-spin" />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </header>
        </>
    );
}

function NotificationsDropdown({
    onClose,
    notes,
    unreadCount,
}: {
    onClose: () => void;
    notes: Array<{ id: number; name: string; subject: string; time: string | null }>;
    unreadCount: number;
}) {
    return (
        <div className="hs-dropdown-menu ti-dropdown-menu w-[20rem] border-0 absolute end-0 top-full z-50 mt-2">
            <div className="ti-dropdown-header !bg-primary border-b dark:border-white/10 flex justify-between items-center">
                <p className="ti-dropdown-header-title !text-white font-semibold">Notifications</p>
                <Link
                    href={route('admin.contact-messages.read-all')}
                    method="post"
                    as="button"
                    className="badge bg-black/20 text-white rounded-sm border-0"
                    onClick={onClose}
                    disabled={unreadCount === 0}
                >
                    Mark All Read
                </Link>
            </div>
            <div className="ti-dropdown-divider divide-y divide-gray-200 dark:divide-white/10">
                <div className="py-2 first:pt-0 last:pb-0">
                    {notes.length > 0 ? (
                        notes.map((n) => (
                            <div key={n.id} className="ti-dropdown-item relative header-box">
                                <div className="flex space-x-3 rtl:space-x-reverse">
                                    <div className="avatar me-2 shrink-0 rounded-full ring-0">
                                        <div className="h-9 w-9 rounded-sm bg-primary/10 text-primary flex items-center justify-center">
                                            <i className="ri-mail-line" />
                                        </div>
                                    </div>
                                    <div className="min-w-0 flex-1">
                                        <h5 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white">{n.name}</h5>
                                        <p className="mb-1 max-w-[200px] truncate text-xs">{n.subject}</p>
                                        <p className="text-xs text-gray-400 dark:text-white/70">{n.time ?? 'Just now'}</p>
                                    </div>
                                </div>
                            </div>
                        ))
                    ) : (
                        <div className="ti-dropdown-item relative header-box">
                            <p className="mb-0 text-xs text-gray-500 dark:text-white/70">No unread contact messages.</p>
                        </div>
                    )}
                </div>
                <div className="px-5 py-2">
                    <Link href={route('admin.contact-messages')} className="w-full ti-btn ti-btn-primary p-2 text-center block" onClick={onClose}>
                        View All
                    </Link>
                </div>
            </div>
        </div>
    );
}