'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
    HomeIcon,
    UserPlusIcon,
    RectangleStackIcon,
    UsersIcon,
    ListBulletIcon
} from '@heroicons/react/24/outline';
import {
    HomeIcon as HomeIconSolid,
    UserPlusIcon as UserPlusIconSolid,
    RectangleStackIcon as RectangleStackIconSolid,
    UsersIcon as UsersIconSolid,
    ListBulletIcon as ListBulletIconSolid
} from '@heroicons/react/24/solid';
import { MenuItem } from './SidebarRail';

interface MobileBottomBarProps {
    menuItems?: MenuItem[];
}

export const MobileBottomBar: React.FC<MobileBottomBarProps> = ({ menuItems }) => {
    const pathname = usePathname();

    const isActive = (path: string) => {
        if (path === '/dashboard' || path === '/cliente/dashboard') {
            return pathname === path;
        }
        return pathname.startsWith(path);
    };

    // Mapeamento de ícones sólidos para os itens do menu
    const getSolidIcon = (label: string, defaultIcon: any) => {
        const map: Record<string, any> = {
            'Dashboard': HomeIconSolid,
            'Leads': UserPlusIconSolid,
            'Listas': RectangleStackIconSolid,
            'CRM': UsersIconSolid,
            'Meus Leads': UserPlusIconSolid,
            'Meu Perfil': UserPlusIconSolid,
        };
        return map[label] || defaultIcon;
    };

    const navItems = menuItems
        ? menuItems.reduce((acc: any[], item) => {
            if (item.href !== '#') {
                acc.push({
                    label: item.label,
                    path: item.href,
                    icon: item.icon,
                    iconSolid: getSolidIcon(item.label, item.icon)
                });
            } else if (item.subItems) {
                // Adiciona subitens importantes se o item pai for '#'
                item.subItems.forEach(sub => {
                    acc.push({
                        label: sub.label,
                        path: sub.href,
                        icon: item.icon, // Usa o ícone do pai
                        iconSolid: getSolidIcon(sub.label, item.icon)
                    });
                });
            }
            return acc;
        }, []).slice(0, 4) // Limita a 4 itens no mobile
        : [
            {
                label: 'Dashboard',
                path: '/dashboard',
                icon: HomeIcon,
                iconSolid: HomeIconSolid
            },
            {
                label: 'Leads',
                path: '/crm/leads',
                icon: UserPlusIcon,
                iconSolid: UserPlusIconSolid
            },
            {
                label: 'Listas',
                path: '/crm/listas',
                icon: RectangleStackIcon,
                iconSolid: RectangleStackIconSolid
            }
        ];

    return (
        <>
            {/* Bottom Navigation - Mobile Only */}
            <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-800 shadow-lg">
                <div className="flex items-center justify-around h-16 px-4">
                    {navItems.map((item) => {
                        const active = isActive(item.path);
                        const Icon = active ? item.iconSolid : item.icon;

                        return (
                            <Link
                                key={item.label}
                                href={item.path}
                                className="flex flex-col items-center justify-center min-w-[70px] h-full gap-1"
                            >
                                <Icon className={`w-6 h-6 ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`} />
                                <span className={`text-xs font-medium ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`}>
                                    {item.label}
                                </span>
                            </Link>
                        );
                    })}
                </div>
            </nav>
        </>
    );
};