'use client';

import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
import { useTheme } from 'next-themes';
import { getUser, User, getToken, saveAuth } from '@/lib/auth';
import { API_ENDPOINTS } from '@/lib/api';
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 {
    isExpanded: boolean;
    onToggle: () => void;
    menuItems: MenuItem[];
}

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

    useEffect(() => {
        setMounted(true);
        const currentUser = getUser();
        setUser(currentUser);

        // Buscar perfil da agência para atualizar logo e nome
        const fetchProfile = async () => {
            const token = getToken();
            if (!token) return;

            try {
                const res = await fetch(API_ENDPOINTS.agencyProfile, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });

                if (res.ok) {
                    const data = await res.json();
                    if (currentUser) {
                        // Usar localStorage como fallback se API não retornar logo
                        const cachedLogo = localStorage.getItem('agency-logo-url');
                        const finalLogoUrl = data.logo_url || cachedLogo;

                        const updatedUser = {
                            ...currentUser,
                            company: data.name || currentUser.company,
                            logoUrl: finalLogoUrl
                        };
                        setUser(updatedUser);
                        saveAuth(token, updatedUser); // Persistir atualização

                        // Atualizar localStorage do logo (preservar se já existe)
                        if (finalLogoUrl) {
                            console.log('📝 Salvando logo no localStorage:', finalLogoUrl);
                            localStorage.setItem('agency-logo-url', finalLogoUrl);
                            window.dispatchEvent(new Event('auth-update')); // Notificar favicon
                            window.dispatchEvent(new Event('branding-update')); // Notificar AgencyBranding
                        }
                    }
                }
            } catch (error) {
                console.error('Error fetching agency profile:', error);
            }
        };

        fetchProfile();

        // Listener para atualizar logo em tempo real após upload
        // REMOVIDO: Causa loop infinito com o dispatchEvent dentro do fetchProfile
        // O AgencyBranding já cuida de atualizar o favicon/cores
        // Se precisar atualizar o sidebar após upload, usar um evento específico 'logo-uploaded'
        /*
        const handleBrandingUpdate = () => {
            console.log('SidebarRail: branding-update event received');
            fetchProfile(); // Re-buscar perfil do backend
        };

        window.addEventListener('branding-update', handleBrandingUpdate);

        return () => {
            window.removeEventListener('branding-update', handleBrandingUpdate);
        };
        */
    }, []);

    // Fechar submenu ao clicar fora
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
                // Verifica se o submenu aberto corresponde à rota atual
                // Se estivermos navegando dentro do módulo (ex: CRM), o menu deve permanecer fixo
                const activeItem = menuItems.find(item => item.id === openSubmenu);
                const isRouteActive = activeItem && activeItem.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href));

                if (!isRouteActive) {
                    setOpenSubmenu(null);
                }
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [openSubmenu, pathname, menuItems]);

    // 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');
        window.location.href = '/login';
    };

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

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

    // Lógica de largura do Rail: Se tiver submenu aberto, força recolhimento visual (80px)
    // Se não, respeita o estado isExpanded
    const railWidth = isExpanded && !openSubmenu ? 'w-[240px]' : 'w-[80px]';
    const showLabels = isExpanded && !openSubmenu;

    return (
        <div className={`
            flex h-full relative z-20 transition-all duration-300 
            ${openSubmenu ? 'shadow-xl' : 'shadow-lg'} 
            rounded-2xl
        `} ref={sidebarRef}>
            {/* Rail Principal (Ícones + Labels Opcionais) */}
            <div
                className={`
                    relative h-full bg-white dark:bg-zinc-900 flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 z-30
                    transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-gray-100 dark:border-zinc-800
                    ${railWidth}
                    ${openSubmenu ? 'rounded-l-2xl rounded-r-none border-r-0' : 'rounded-2xl'}
                `}
            >
                {/* Toggle Button - Floating on the border */}
                {/* Só mostra o toggle se não tiver submenu aberto, para evitar confusão */}
                {!openSubmenu && (
                    <button
                        onClick={onToggle}
                        className="absolute -right-3 top-8 z-50 h-6 w-6 flex 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 ${showLabels ? 'justify-start px-1' : 'justify-center'}`}>
                    <div
                        className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg overflow-hidden bg-brand-500"
                    >
                        {user?.logoUrl ? (
                            <img src={user.logoUrl} alt={user.company || 'Logo'} className="w-full h-full object-cover" />
                        ) : (
                            (user?.company?.[0] || 'A').toUpperCase()
                        )}
                    </div>
                    {/* Título com animação */}
                    <div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${showLabels ? '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">
                            {user?.company || 'Aggios'}
                        </span>
                    </div>
                </div>

                {/* Navegação */}
                <div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto items-center">
                    {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={(e: any) => {
                                if (item.subItems) {
                                    // Se já estiver aberto, fecha e previne navegação
                                    if (openSubmenu === item.id) {
                                        e.preventDefault();
                                        setOpenSubmenu(null);
                                    } else {
                                        // Se estiver fechado, abre o submenu
                                        setOpenSubmenu(item.id);
                                    }
                                } else {
                                    setOpenSubmenu(null);
                                }
                            }}
                            showLabel={showLabels}
                            hasSubItems={!!item.subItems}
                            isOpen={openSubmenu === item.id}
                        />
                    ))}
                </div>

                {/* Separador */}
                <div className="h-px bg-gray-200 dark:bg-zinc-800 my-2 w-full" />

                {/* User Menu */}
                <div className={`flex ${showLabels ? 'justify-start' : 'justify-center'}`}>
                    {mounted && (
                        <Menu>
                            <MenuButton className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${showLabels ? '' : 'justify-center'}`}>
                                <UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
                                <div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${showLabels ? '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">
                                        {user?.name || 'Usuário'}
                                    </span>
                                </div>
                            </MenuButton>
                            <MenuItems
                                anchor="top start"
                                transition
                                className={`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 transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0`}
                            >
                                <div className="p-1">
                                    <MenuItem>
                                        <button
                                            className="data-[focus]:bg-gray-100 dark:data-[focus]: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>
                                    </MenuItem>
                                    <MenuItem>
                                        <button
                                            onClick={toggleTheme}
                                            className="data-[focus]:bg-gray-100 dark:data-[focus]:bg-zinc-800 text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs"
                                        >
                                            {theme === 'dark' ? (
                                                <>
                                                    <SunIcon className="mr-2 h-4 w-4" />
                                                    Tema Claro
                                                </>
                                            ) : (
                                                <>
                                                    <MoonIcon className="mr-2 h-4 w-4" />
                                                    Tema Escuro
                                                </>
                                            )}
                                        </button>
                                    </MenuItem>
                                    <div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
                                    <MenuItem>
                                        <button
                                            onClick={handleLogout}
                                            className="data-[focus]:bg-red-50 dark:data-[focus]: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>
                                    </MenuItem>
                                </div>
                            </MenuItems>
                        </Menu>
                    )}
                    {!mounted && (
                        <div className={`w-full p-2 rounded-lg flex items-center ${showLabels ? '' : 'justify-center'}`}>
                            <UserCircleIcon className="w-6 h-6 text-gray-600 dark:text-gray-400 shrink-0" />
                        </div>
                    )}
                </div>
            </div>

            {/* Painel Secundário (Drawer) - Abre ao lado do Rail */}
            <div
                className={`
                    h-full
                    bg-white dark:bg-zinc-900 rounded-r-2xl border-y border-r border-l border-gray-100 dark:border-zinc-800
                    transition-all duration-300 ease-in-out origin-left z-20 flex flex-col overflow-hidden
                    ${openSubmenu ? 'w-64 opacity-100 translate-x-0' : 'w-0 opacity-0 -translate-x-10 border-none'}
                `}
            >
                {activeMenuItem && (
                    <>
                        <div className="p-4 border-b border-gray-100 dark:border-zinc-800 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)} // Removido para manter fixo
                                    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: (e?: any) => void;
    showLabel: boolean;
    hasSubItems?: boolean;
    isOpen?: boolean;
}

const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, showLabel, hasSubItems, isOpen }) => {
    // Determine styling based on state
    // Sempre usa Link se tiver href, para garantir navegação correta e prefetching
    const Wrapper = href ? Link : 'button';
    // Desabilitar prefetch para evitar sobrecarga no middleware/backend e loops de redirecionamento
    const props = href ? { href, onClick, prefetch: false } : { onClick, type: 'button' };

    let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden ";
    if (showLabel) {
        baseClasses += "w-full justify-start ";
    } else {
        baseClasses += "w-10 h-10 justify-center mx-auto ";
    }

    // Lógica unificada de ativo
    const isActiveItem = active || isOpen;

    if (isActiveItem) {
        baseClasses += "bg-brand-500 text-white shadow-sm";
    } 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}
            className={baseClasses}
            title={!showLabel ? label : undefined} // Tooltip nativo apenas se recolhido
        >
            {/* Ícone */}
            <Icon className={`shrink-0 w-5 h-5 ${isActiveItem ? 'text-white' : ''}`} />

            {/* Texto (Visível apenas se expandido) */}
            <div className={`
                overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
                ${showLabel ? 'max-w-[150px] opacity-100 ml-3' : '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 ${isActiveItem ? 'text-white' : 'text-gray-400'}`} />
                )}
            </div>

            {/* Indicador de Ativo (Ponto lateral) - Apenas se recolhido e NÃO tiver gradiente (redundante agora, mas mantido por segurança) */}
            {active && !hasSubItems && !showLabel && !isActiveItem && (
                <div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-4 bg-white rounded-r-full" />
            )}
        </Wrapper>
    );
};