'use client';

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

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

    // Gerar breadcrumbs a partir do pathname
    const generateBreadcrumbs = () => {
        const paths = pathname?.split('/').filter(Boolean) || [];
        const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
            { name: 'Home', href: '/superadmin', icon: HomeIcon }
        ];

        let currentPath = '';
        paths.forEach((path, index) => {
            currentPath += `/${path}`;

            // Mapeamento de nomes amigáveis
            const nameMap: Record<string, string> = {
                'superadmin': 'SuperAdmin',
                'agencies': 'Agências',
                'signup-templates': 'Templates',
                'agency-templates': 'Templates Agência',
                'settings': 'Configurações',
                'new': 'Novo',
            };

            if (index > 0) { // Pula 'superadmin' no breadcrumb
                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-6 py-3 flex items-center justify-between transition-colors">
                {/* Breadcrumbs */}
                <nav className="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-4">
                    <button
                        onClick={() => setIsCommandPaletteOpen(true)}
                        className="group relative flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-all w-64"
                    >
                        <MagnifyingGlassIcon className="w-4 h-4 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300" />
                        <span>Pesquisar...</span>
                        <div className="ml-auto flex items-center gap-1">
                            <kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
                                Ctrl K
                            </kbd>
                        </div>
                    </button>
                </div>
            </div>

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