'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 {
    HomeIcon,
    BuildingOfficeIcon,
    LinkIcon,
    Cog6ToothIcon,
    DocumentTextIcon,
    ChevronLeftIcon,
    ChevronRightIcon,
    UserCircleIcon,
    ArrowRightOnRectangleIcon,
    SunIcon,
    MoonIcon,
} from '@heroicons/react/24/outline';

export interface MenuItem {
    id: string;
    label: string;
    href: string;
    icon: any;
}

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);

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

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

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

    return (
        <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
        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-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
                </div>
            </div>

            {/* Separador removido para visual mais limpo */}

            {/* 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 !== '/superadmin' && item.href !== '/dashboard' && pathname?.startsWith(item.href))}
                        onClick={() => onTabChange(item.id)}
                        isExpanded={isExpanded}
                    />
                ))}
            </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">SuperAdmin</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="/superadmin/settings"
                                            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>
    );
};

// Subcomponente do Botão (Essencial para a animação do texto)
interface RailButtonProps {
    label: string;
    icon: React.ComponentType<{ className?: string }>;
    href: string;
    active: boolean;
    onClick: () => void;
    isExpanded: boolean;
}

const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded }) => (
    <Link
        href={href}
        onClick={onClick}
        style={{ background: active ? 'var(--gradient)' : undefined }}
        className={`
      flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden
      ${active
                ? 'text-white shadow-md'
                : 'hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400'
            }
      ${isExpanded ? '' : 'justify-center'}
    `}
    >
        {/* Ícone */}
        <Icon className="shrink-0 w-4 h-4" />

        {/* Lógica Mágica do Texto: Max-Width Transition */}
        <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">{label}</span>
        </div>

        {/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
        {active && !isExpanded && (
            <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)' }}
            />
        )}
    </Link>
);