'use client';

import { Fragment } from 'react';
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@zen/core/shared/icons';
import { useRouter } from 'next/navigation';
import { useTheme, getThemeIcon } from '@zen/core/themes';

const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN' }) => {
    const router = useRouter();

    const getImageUrl = (imageKey) => {
        if (!imageKey) return null;
        return `/zen/api/storage/${imageKey}`;
    };

    const handleLogout = async () => {
        try {
            if (onLogout) {
                const result = await onLogout();
                if (result && result.success) {
                    router.push('/auth/login');
                } else {
                    console.error('Logout failed:', result?.error);
                    router.push('/auth/login');
                }
            } else {
                router.push('/auth/login');
            }
        } catch (error) {
            console.error('Logout error:', error);
            router.push('/auth/login');
        }
    };

    const getUserInitials = (name) => {
        if (!name) return 'U';
        return name
            .split(' ')
            .map(n => n[0])
            .join('')
            .toUpperCase()
            .slice(0, 2);
    };

    const { theme, toggle, systemIsDark } = useTheme();
    const ThemeIcon = getThemeIcon(theme, systemIsDark);
    const themeLabel = theme === 'light' ? 'Mode clair' : theme === 'dark' ? 'Mode sombre' : 'Thème système';

    const quickLinks = [];
    const imageUrl = getImageUrl(user?.image);
    const userInitials = getUserInitials(user?.name);

    return (
        <header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-14 flex items-center w-full">
            <div className="flex items-center justify-between lg:justify-end px-4 lg:px-6 py-2 w-full">
                {/* Left section — Mobile menu button + Logo */}
                <div className="flex items-center space-x-3 lg:hidden">
                    <button
                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                        className="p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-700/50 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors duration-200"
                        aria-label="Toggle menu"
                    >
                        <svg className={`h-5 w-5 transition-transform duration-200 ${isMobileMenuOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
                        </svg>
                    </button>
                    <h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
                </div>

                {/* Right section — Quick links + Profile */}
                <div className="flex items-center gap-3 sm:gap-4">
                    <nav className="hidden sm:flex items-center gap-4 lg:gap-6">
                        {quickLinks.map((link) => (
                            <a
                                key={link.name}
                                href={link.href}
                                className="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
                            >
                                {link.name}
                            </a>
                        ))}
                    </nav>

                    {/* User Profile Menu */}
                    <Menu as="div" className="relative">
                        <MenuButton className="cursor-pointer flex items-center gap-2.5 px-2.5 py-1.5 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200 outline-none group">
                            {/* Avatar */}
                            {imageUrl ? (
                                <img
                                    src={imageUrl}
                                    alt={user?.name || 'User'}
                                    className="w-7 h-7 rounded-lg object-cover shrink-0"
                                />
                            ) : (
                                <div className="w-7 h-7 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
                                    <span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
                                </div>
                            )}
                            {/* Name — desktop only */}
                            <span className="hidden sm:block text-sm font-medium text-neutral-900 dark:text-white">
                                {user?.name || 'User'}
                            </span>
                            <ChevronDownIcon className="w-3.5 h-3.5 shrink-0 text-neutral-400 dark:text-neutral-600 transition-transform duration-200 group-data-open:rotate-180" />
                        </MenuButton>

                        <Transition
                            as={Fragment}
                            enter="transition ease-out duration-150"
                            enterFrom="opacity-0 translate-y-1"
                            enterTo="opacity-100 translate-y-0"
                            leave="transition ease-in duration-100"
                            leaveFrom="opacity-100 translate-y-0"
                            leaveTo="opacity-0 translate-y-1"
                        >
                            <MenuItems className="absolute right-0 mt-4 w-56 sm:w-64 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
                                {/* User info */}
                                <div className="px-3 pt-3 pb-2 flex items-center gap-3">
                                    {imageUrl ? (
                                        <img
                                            src={imageUrl}
                                            alt={user?.name || 'User'}
                                            className="w-9 h-9 rounded-lg object-cover shrink-0"
                                        />
                                    ) : (
                                        <div className="w-9 h-9 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
                                            <span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
                                        </div>
                                    )}
                                    <div className="min-w-0">
                                        <p className="text-sm font-medium text-neutral-900 dark:text-white truncate leading-tight">
                                            {user?.name || user?.email || 'User'}
                                        </p>
                                        {user?.name && (
                                            <p className="text-xs text-neutral-400 dark:text-neutral-500 truncate leading-tight mt-0.5">
                                                {user.email}
                                            </p>
                                        )}
                                    </div>
                                </div>

                                <div className="p-1.5 flex flex-col gap-0.5">
                                    {/* Quick links — mobile only */}
                                    {quickLinks.length > 0 && (
                                        <>
                                            {quickLinks.map((link) => (
                                                <MenuItem key={link.name}>
                                                    <a
                                                        href={link.href}
                                                        className="sm:hidden flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
                                                    >
                                                        <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                        </svg>
                                                        {link.name}
                                                    </a>
                                                </MenuItem>
                                            ))}
                                            <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
                                        </>
                                    )}

                                    {/* Profile */}
                                    <MenuItem>
                                        <a
                                            href="/admin/profile"
                                            className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-violet-50 dark:data-focus:bg-violet-500/10 data-focus:text-violet-500 dark:data-focus:text-violet-400"
                                        >
                                            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                            </svg>
                                            Mon profil
                                        </a>
                                    </MenuItem>

                                    {/* Theme — pas de MenuItem pour ne pas fermer le menu au clic */}
                                    <button
                                        onClick={toggle}
                                        className="cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-150"
                                    >
                                        <ThemeIcon className="w-4 h-4 shrink-0" />
                                        {themeLabel}
                                    </button>

                                    <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />

                                    {/* Logout */}
                                    <MenuItem>
                                        <button
                                            onClick={handleLogout}
                                            className="cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10 data-focus:text-red-500 dark:data-focus:text-red-400"
                                        >
                                            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                            </svg>
                                            Se déconnecter
                                        </button>
                                    </MenuItem>
                                </div>
                            </MenuItems>
                        </Transition>
                    </Menu>
                </div>
            </div>
        </header>
    );
};

export default AdminHeader;