aggios.app/front-end-agency/components/layout/TopBar.tsx

'use client';

import React, { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon, BellIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
import CommandPalette from '@/components/ui/CommandPalette';
import { getUser } from '@/lib/auth';

export const TopBar: React.FC = () => {
    const pathname = usePathname();
    const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
    const [user, setUser] = useState<any>(null);

    useEffect(() => {
        const userData = getUser();
        setUser(userData);
    }, []);

    const generateBreadcrumbs = () => {
        const paths = pathname?.split('/').filter(Boolean) || [];
        const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
            { name: 'Home', href: '/dashboard', icon: HomeIcon }
        ];
        let currentPath = '';
        paths.forEach((path, index) => {
            currentPath += `/${path}`;

            // Mapeamento de nomes amigáveis
            const nameMap: Record<string, string> = {
                'dashboard': 'Dashboard',
                'clientes': 'Clientes',
                'projetos': 'Projetos',
                'financeiro': 'Financeiro',
                'configuracoes': 'Configurações',
                'novo': 'Novo',
            };

            if (path !== 'dashboard') { // Evita duplicar Home/Dashboard se a rota for /dashboard
                breadcrumbs.push({
                    name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1),
                    href: currentPath,
                });
            }
        });

        return breadcrumbs;
    };

    const breadcrumbs = generateBreadcrumbs();

    return (
        <>
            <div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-4 md:px-6 py-3 flex items-center justify-between transition-colors">
                {/* Logo Mobile */}
                <Link href="/dashboard" className="md:hidden flex items-center gap-2">
                    <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold shrink-0 shadow-md overflow-hidden bg-brand-500">
                        {user?.logoUrl ? (
                            <img src={user.logoUrl} alt={user?.company || 'Logo'} className="w-full h-full object-cover" />
                        ) : (
                            (user?.company?.charAt(0)?.toUpperCase() || 'A')
                        )}
                    </div>
                </Link>

                {/* Breadcrumbs Desktop */}
                <nav className="hidden md:flex items-center gap-2 text-xs">{breadcrumbs.map((crumb, index) => {
                    const Icon = crumb.icon;
                    const isLast = index === breadcrumbs.length - 1;

                    return (
                        <div key={crumb.href} className="flex items-center gap-2">
                            {Icon ? (
                                <Link
                                    href={crumb.href}
                                    className="flex items-center gap-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-colors"
                                >
                                    <Icon className="w-3.5 h-3.5" />
                                    <span>{crumb.name}</span>
                                </Link>
                            ) : (
                                <Link
                                    href={crumb.href}
                                    className={`${isLast ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200'} transition-colors`}
                                >
                                    {crumb.name}
                                </Link>
                            )}

                            {!isLast && <ChevronRightIcon className="w-3 h-3 text-gray-400 dark:text-zinc-600" />}
                        </div>
                    );
                })}
                </nav>

                {/* Search Bar Trigger */}
                <div className="flex items-center gap-2 md:gap-4">
                    <button
                        onClick={() => setIsCommandPaletteOpen(true)}
                        className="flex items-center gap-2 px-2 md:px-3 py-1.5 text-sm text-gray-500 dark:text-zinc-400 bg-gray-100 dark:bg-zinc-800 rounded-lg hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors"
                    >
                        <MagnifyingGlassIcon className="w-4 h-4" />
                        <span className="hidden md:inline">Buscar...</span>
                        <kbd className="hidden md:inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 bg-white dark:bg-zinc-900 rounded border border-gray-200 dark:border-zinc-700">
                            Ctrl K
                        </kbd>
                    </button>
                    <div className="flex items-center gap-2 border-l border-gray-200 dark:border-zinc-800 pl-4">
                        <button className="p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors relative">
                            <BellIcon className="w-5 h-5" />
                            <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-zinc-900"></span>
                        </button>
                        <Link
                            href="/configuracoes"
                            className="flex p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
                        >
                            <Cog6ToothIcon className="w-5 h-5" />
                        </Link>
                    </div>
                </div>
            </div>

            {/* Command Palette */}
            <CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
        </>
    );
};