'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
    HomeIcon,
    RocketLaunchIcon,
    Squares2X2Icon
} from '@heroicons/react/24/outline';
import {
    HomeIcon as HomeIconSolid,
    RocketLaunchIcon as RocketIconSolid,
    Squares2X2Icon as GridIconSolid
} from '@heroicons/react/24/solid';

export const MobileBottomBar: React.FC = () => {
    const pathname = usePathname();
    const [showMoreMenu, setShowMoreMenu] = useState(false);

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

    const navItems = [
        {
            label: 'Início',
            path: '/dashboard',
            icon: HomeIcon,
            iconSolid: HomeIconSolid
        },
        {
            label: 'CRM',
            path: '/crm',
            icon: RocketLaunchIcon,
            iconSolid: RocketIconSolid
        },
        {
            label: 'Mais',
            path: '#',
            icon: Squares2X2Icon,
            iconSolid: GridIconSolid,
            onClick: () => setShowMoreMenu(true)
        }
    ];

    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;

                        if (item.onClick) {
                            return (
                                <button
                                    key={item.label}
                                    onClick={item.onClick}
                                    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>
                                </button>
                            );
                        }

                        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>

            {/* More Menu Modal */}
            {showMoreMenu && (
                <div className="md:hidden fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm" onClick={() => setShowMoreMenu(false)}>
                    <div
                        className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <div className="p-6">
                            {/* Handle bar */}
                            <div className="w-12 h-1.5 bg-gray-300 dark:bg-zinc-700 rounded-full mx-auto mb-6" />

                            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">
                                Todos os Módulos
                            </h2>

                            <div className="grid grid-cols-3 gap-4">
                                <Link
                                    href="/erp"
                                    onClick={() => setShowMoreMenu(false)}
                                    className="flex flex-col items-center gap-3 p-4 rounded-2xl hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"
                                >
                                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white shadow-lg">
                                        <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                                            <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                                        </svg>
                                    </div>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white text-center">
                                        ERP
                                    </span>
                                </Link>

                                {/* Add more modules here */}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};