arbritage/layouts/Header.tsx

import React from 'react';
import { TrendingUp, Bell, Search, Command, Menu } from 'lucide-react';
import { useCRM } from '../context/CRMContext';
import { useLocation } from 'react-router-dom';
import clsx from 'clsx';

interface HeaderProps {
    onMenuClick?: () => void;
}

const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
    const { exchangeRate, orders } = useCRM();
    const location = useLocation();

    // Mapping English paths to proper titles if needed, or keeping English for 'Premium' feel
    const getTitle = () => {
        const path = location.pathname.substring(1);
        if (!path) return 'Dashboard';

        const titles: Record<string, string> = {
            'sales': 'Vendas',
            'sourcing': 'Sourcing', // or Arbitragem
            'products': 'Produtos',
            'orders': 'Pedidos',
            'financial': 'Financeiro',
            'customers': 'Clientes',
            'inventory': 'Estoque',
            'suppliers': 'Fornecedores',
            'reports': 'Relatórios',
            'users': 'Usuários',
            'settings': 'Configurações'
        };

        return titles[path] || path.charAt(0).toUpperCase() + path.slice(1);
    };

    const totalProfit = orders
        .filter(o => o.status === 'Received')
        .reduce((acc, o) => acc + o.estimatedProfit, 0);

    return (
        <header className="h-[80px] px-4 md:px-8 flex items-center justify-between sticky top-0 z-40 bg-background/80 backdrop-blur-md border-b border-border/40">
            {/* Left: Breadcrumb/Title */}
            <div className="flex items-center gap-3">
                <button
                    onClick={onMenuClick}
                    className="md:hidden p-2 -ml-2 text-muted-foreground hover:text-foreground"
                >
                    <Menu size={24} />
                </button>
                <div className="flex flex-col justify-center">
                    <div className="flex items-center gap-2 text-muted-foreground text-[10px] uppercase font-bold tracking-widest">
                        <span>App</span>
                        <span className="text-border">/</span>
                        <span className="text-foreground">{getTitle()}</span>
                    </div>
                    <h2 className="text-xl font-bold tracking-tight text-foreground">{getTitle()}</h2>
                </div>
            </div>

            {/* Right: Actions */}
            <div className="flex items-center gap-4 md:gap-6">

                {/* Search Bar (Visual Only) */}
                <div className="hidden md:flex items-center gap-2 bg-secondary/50 border border-border/50 px-3 py-2 rounded-lg text-sm text-muted-foreground w-64 hover:border-border transition-colors">
                    <Search size={14} />
                    <span className="flex-1">Buscar...</span>
                    <div className="flex items-center gap-[1px]">
                        <div className="bg-border p-1 rounded-[4px]"><Command size={10} className="text-foreground" /></div>
                        <span className="text-[10px] font-bold">K</span>
                    </div>
                </div>

                <div className="h-6 w-[1px] bg-border"></div>

                {/* Stats */}
                <div className="flex items-center gap-6">
                    <div className="flex flex-col items-end group cursor-help">
                        <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest mb-0.5 group-hover:text-foreground transition-colors">Dólar Hoje</span>
                        <span className="text-sm font-bold text-foreground font-mono bg-secondary/50 px-2 rounded">R$ {exchangeRate.toFixed(2)}</span>
                    </div>

                    <div className="flex items-center gap-3 pl-6 border-l border-border">
                        <div className="flex flex-col items-end">
                            <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest mb-0.5">Lucro Total</span>
                            <span className={clsx(
                                "text-sm font-bold font-mono px-2 rounded",
                                totalProfit > 0 ? "text-emerald-400 bg-emerald-400/10" : "text-foreground"
                            )}>
                                R$ {totalProfit.toLocaleString('pt-BR')}
                            </span>
                        </div>
                    </div>
                </div>

                <button className="w-10 h-10 rounded-full border border-border bg-secondary/30 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-secondary transition-all">
                    <Bell size={18} />
                </button>
            </div>
        </header>
    );
};

export default Header;