'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Menu, Transition } from '@headlessui/react';
import { Fragment } from 'react';
import { useTheme } from 'next-themes';
import {
    ChevronLeftIcon,
    ChevronRightIcon,
    ChevronDownIcon,
    UserCircleIcon,
    ArrowRightOnRectangleIcon,
    SunIcon,
    MoonIcon,
    Cog6ToothIcon,
    XMarkIcon,
} from '@heroicons/react/24/outline';

export interface MenuItem {
    id: string;
    label: string;
    href: string;
    icon: any;
    subItems?: {
        label: string;
        href: string;
    }[];
}

interface SidebarRailProps {
    activeTab: string;
    onTabChange: (tab: string) => void;
    isExpanded: boolean;
    onToggle: () => void;
    menuItems: MenuItem[];
}

export const SidebarRail: React.FC<SidebarRailProps> = ({
    activeTab,
    onTabChange,
    isExpanded,
    onToggle,
    menuItems,
}) => {
    const pathname = usePathname();
    const router = useRouter();
    const { theme, setTheme } = useTheme();
    const [mounted, setMounted] = useState(false);
    const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);

    useEffect(() => {
        setMounted(true);
    }, []);

    // Auto-open submenu if active
    useEffect(() => {
        if (isExpanded && pathname) {
            const activeItem = menuItems.find(item =>
                item.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href))
            );
            if (activeItem) {
                setOpenSubmenu(activeItem.id);
            }
        }
    }, [pathname, isExpanded, menuItems]);

    const handleLogout = () => {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        router.push('/login');
    };

    const toggleTheme = () => {
        setTheme(theme === 'dark' ? 'light' : 'dark');
    };

    // Encontrar o item ativo para renderizar o submenu
    const activeMenuItem = menuItems.find(item => item.id === openSubmenu);

    return (
        <div className="flex h-full relative z-20">
            <div
                className={`
        relative h-full bg-white dark:bg-zinc-900 rounded-2xl flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 shadow-lg z-20
        transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
        ${isExpanded ? 'w-[240px]' : 'w-[80px]'}
      `}
            >
                {/* Toggle Button - Floating on the border */}
                <button
                    onClick={onToggle}
                    className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
                    aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
                >
                    {isExpanded ? (
                        <ChevronLeftIcon className="w-3 h-3" />
                    ) : (
                        <ChevronRightIcon className="w-3 h-3" />
                    )}
                </button>

                {/* Header com Logo */}
                <div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
                    {/* Logo */}
                    <div
                        className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
                        style={{ background: 'var(--gradient)' }}
                    >
                        A
                    </div>

                    {/* Título com animação */}
                    <div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${isExpanded ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
                        <span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
                    </div>
                </div>

                {/* Navegação */}
                <div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
                    {menuItems.map((item) => (
                        <RailButton
                            key={item.id}
                            label={item.label}
                            icon={item.icon}
                            href={item.href}
                            active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
                            onClick={() => {
                                if (item.subItems) {
                                    setOpenSubmenu(openSubmenu === item.id ? null : item.id);
                                } else {
                                    onTabChange(item.id);
                                    setOpenSubmenu(null);
                                }
                            }}
                            isExpanded={isExpanded}
                            hasSubItems={!!item.subItems}
                            isOpen={openSubmenu === item.id}
                        />
                    ))}
                </div>

                {/* Separador antes do menu de usuário */}
                <div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />

                {/* User Menu - Footer */}
                <div>
                    <Menu as="div" className="relative">
                        <Menu.Button className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${isExpanded ? '' : 'justify-center'}`}>
                            <UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
                            <div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
                                <span className="font-medium text-xs text-gray-900 dark:text-white">Agência</span>
                            </div>
                        </Menu.Button>

                        <Transition
                            as={Fragment}
                            enter="transition ease-out duration-100"
                            enterFrom="transform opacity-0 scale-95"
                            enterTo="transform opacity-100 scale-100"
                            leave="transition ease-in duration-75"
                            leaveFrom="transform opacity-100 scale-100"
                            leaveTo="transform opacity-0 scale-95"
                        >
                            <Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
                                <div className="p-1">
                                    <Menu.Item>
                                        {({ active }) => (
                                            <button
                                                className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
                                            >
                                                <UserCircleIcon className="mr-2 h-4 w-4" />
                                                Ver meu perfil
                                            </button>
                                        )}
                                    </Menu.Item>
                                    <Menu.Item>
                                        {({ active }) => (
                                            <Link
                                                href="/configuracoes"
                                                className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
                                            >
                                                <Cog6ToothIcon className="mr-2 h-4 w-4" />
                                                Configurações
                                            </Link>
                                        )}
                                    </Menu.Item>
                                    <Menu.Item>
                                        {({ active }) => (
                                            <button
                                                onClick={toggleTheme}
                                                className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
                                            >
                                                {mounted && theme === 'dark' ? (
                                                    <>
                                                        <SunIcon className="mr-2 h-4 w-4" />
                                                        Tema Claro
                                                    </>
                                                ) : (
                                                    <>
                                                        <MoonIcon className="mr-2 h-4 w-4" />
                                                        Tema Escuro
                                                    </>
                                                )}
                                            </button>
                                        )}
                                    </Menu.Item>
                                    <div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
                                    <Menu.Item>
                                        {({ active }) => (
                                            <button
                                                onClick={handleLogout}
                                                className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
                                            >
                                                <ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
                                                Sair
                                            </button>
                                        )}
                                    </Menu.Item>
                                </div>
                            </Menu.Items>
                        </Transition>
                    </Menu>
                </div>
            </div>

            {/* Submenu Flyout Panel */}
            <div
                className={`
                    absolute top-0 bottom-0 left-[calc(100%+12px)] w-64
                    bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-100 dark:border-zinc-800
                    transition-all duration-300 ease-in-out origin-left z-10 flex flex-col overflow-hidden
                    ${openSubmenu ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4 pointer-events-none'}
                `}
            >
                {activeMenuItem && (
                    <>
                        <div className="p-4 border-b border-gray-100 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-800/50 flex items-center justify-between">
                            <h3 className="font-heading font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                                <activeMenuItem.icon className="w-5 h-5 text-brand-500" />
                                {activeMenuItem.label}
                            </h3>
                            <button
                                onClick={() => setOpenSubmenu(null)}
                                className="p-1 rounded-md hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-500 dark:text-gray-400 transition-colors"
                                aria-label="Fechar submenu"
                            >
                                <XMarkIcon className="w-5 h-5" />
                            </button>
                        </div>
                        <div className="p-2 flex-1 overflow-y-auto">
                            {activeMenuItem.subItems?.map((sub) => (
                                <Link
                                    key={sub.href}
                                    href={sub.href}
                                    onClick={() => setOpenSubmenu(null)} // Fecha ao clicar
                                    className={`
                                        flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors mb-1
                                        ${pathname === sub.href
                                            ? 'bg-brand-50 dark:bg-brand-900/10 text-brand-600 dark:text-brand-400'
                                            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white'
                                        }
                                    `}
                                >
                                    <span className={`w-1.5 h-1.5 rounded-full ${pathname === sub.href ? 'bg-brand-500' : 'bg-gray-300 dark:bg-zinc-600'}`} />
                                    {sub.label}
                                </Link>
                            ))}
                        </div>
                    </>
                )}
            </div>
        </div>
    );
};

// Subcomponente do Botão
interface RailButtonProps {
    label: string;
    icon: React.ComponentType<{ className?: string }>;
    href: string;
    active: boolean;
    onClick: () => void;
    isExpanded: boolean;
    hasSubItems?: boolean;
    isOpen?: boolean;
}

const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded, hasSubItems, isOpen }) => {
    const Wrapper = hasSubItems ? 'button' : Link;
    const props = hasSubItems ? { onClick, type: 'button' } : { href, onClick };

    // Determine styling based on state
    let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden w-full ";

    if (active && !hasSubItems) {
        // Active leaf item (Dashboard, etc)
        baseClasses += "text-white shadow-md";
    } else if (isOpen) {
        // Open submenu parent - Highlight to show active state
        baseClasses += "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white";
    } else {
        // Inactive item
        baseClasses += "hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400";
    }

    return (
        <Wrapper
            {...props as any}
            style={{ background: active && !hasSubItems ? 'var(--gradient)' : undefined }}
            className={`${baseClasses} ${isExpanded ? '' : 'justify-center'}`}
        >
            {/* Ícone */}
            <Icon className={`shrink-0 w-4 h-4 ${isOpen ? 'text-brand-500' : ''}`} />

            {/* Lógica Mágica do Texto: Max-Width Transition */}
            <div className={`
      overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
      ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}
    `}>
                <span className="font-medium text-xs flex-1 text-left">{label}</span>
                {hasSubItems && (
                    <ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isOpen ? 'text-brand-500' : 'text-gray-400'}`} />
                )}
            </div>

            {/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
            {active && !isExpanded && !hasSubItems && (
                <div
                    className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
                    style={{ background: 'var(--gradient)' }}
                />
            )}
        </Wrapper>
    );
};