'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuth } from '@/lib/auth';
import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

const userMenu = [
    { icon: '📊', label: 'Painel', href: '/dashboard' },
    { icon: '🎁', label: 'Benefícios', href: '/benefits' },
    { icon: '⭐', label: 'Favoritos', href: '/dashboard?tab=favorites' },
    { icon: '📜', label: 'Histórico', href: '/dashboard?tab=history' },
    { icon: '👤', label: 'Perfil', href: '/profile' },
];

const adminMenu = [
    { icon: '📊', label: 'Dashboard', href: '/admin' },
    { icon: '👥', label: 'Usuários', href: '/admin?tab=users' },
    { icon: '🏢', label: 'Parceiros', href: '/admin?tab=partners' },
    { icon: '🎁', label: 'Benefícios', href: '/admin?tab=benefits' },
    { icon: '🔌', label: 'Plugins', href: '/admin?tab=plugins' },
    { icon: '📋', label: 'Logs', href: '/admin?tab=logs' },
    { icon: '⚙️', label: 'Configurações', href: '/settings' },
];

const partnerMenu = [
    { icon: '📊', label: 'Dashboard', href: '/partner' },
    { icon: '🎁', label: 'Benefícios', href: '/partner?tab=benefits' },
    { icon: '👥', label: 'Membros', href: '/partner?tab=members' },
    { icon: '📈', label: 'Relatórios', href: '/partner?tab=reports' },
    { icon: '⚙️', label: 'Configurações', href: '/settings' },
];

export default function Sidebar() {
    const { user, logout, isAdmin, isPartner } = useAuth();
    const pathname = usePathname();
    const [collapsed, setCollapsed] = useState(false);

    const menu = isAdmin ? adminMenu : isPartner ? partnerMenu : userMenu;

    return (
        <aside className={`fixed left-0 top-0 h-full bg-dark-900/80 backdrop-blur-xl border-r border-dark-800 z-40 transition-all duration-300 ${collapsed ? 'w-20' : 'w-64'}`}>
            {/* Logo */}
            <div className="flex items-center justify-between px-6 py-5 border-b border-dark-800">
                {!collapsed && <Link href="/" className="text-xl font-bold gradient-text">Clube67</Link>}
                <button onClick={() => setCollapsed(!collapsed)} className="p-2 rounded-lg hover:bg-dark-800 transition-colors text-dark-400 hover:text-white">
                    {collapsed ? '→' : '←'}
                </button>
            </div>

            {/* Nav */}
            <nav className="mt-4 px-3 space-y-1">
                {menu.map(item => {
                    const active = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href.split('?')[0]));
                    return (
                        <Link key={item.href} href={item.href}
                            className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${active ? 'bg-brand-600/15 text-brand-400 border border-brand-500/20' : 'text-dark-400 hover:text-white hover:bg-dark-800'
                                }`}>
                            <span className="text-lg">{item.icon}</span>
                            {!collapsed && <span>{item.label}</span>}
                        </Link>
                    );
                })}
            </nav>

            {/* User */}
            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-dark-800">
                <div className={`flex items-center gap-3 ${collapsed ? 'justify-center' : ''}`}>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center text-sm font-bold shrink-0">
                        {user?.name?.charAt(0) || '?'}
                    </div>
                    {!collapsed && (
                        <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium truncate">{user?.name}</p>
                            <p className="text-xs text-dark-500 truncate">{user?.email}</p>
                        </div>
                    )}
                </div>
                {!collapsed && (
                    <button onClick={logout}
                        className="w-full mt-3 py-2 text-sm text-dark-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all">
                        Sair da conta
                    </button>
                )}
            </div>
        </aside>
    );
}