// ============================================================================
// PRESENTATIONAL COMPONENT: Navbar.jsx & StatCard.jsx (SHADCN/UI STYLE)
// ============================================================================

function Navbar({ activeTab, onSelectTab, onOpenNewTx }) {
  const { user, isAdmin, logout, theme, toggleTheme, setIsCmdPaletteOpen, setIsWhatsAppModalOpen } = window.useFinance();
  const { Button, Lucide } = window.Shadcn;

  const rawNavItems = [
    { key: 'dashboard', path: '/dashboard', label: 'Dashboard', icon: Lucide?.Layers || '📊' },
    { key: 'lancamentos', path: '/lancamentos', label: 'Movimientos', icon: Lucide?.FileText || '📑' },
    { key: 'proyecciones', path: '/proyecciones', label: 'Proyecciones', icon: Lucide?.TrendingUp || Lucide?.Sparkles || '🔮' },
    { key: 'servicos', path: '/servicos', label: 'Servicios y Reglas', icon: Lucide?.Sparkles || '✨' },
    { key: 'imprimir', path: '/imprimir', label: 'Imprimir Rendición', icon: Lucide?.Printer || '🖨️' },
    { key: 'configuracoes', path: '/configuracoes', label: 'Configuración', icon: Lucide?.Settings || '⚙️', adminOnly: true }
  ];

  const navItems = rawNavItems.filter(item => !item.adminOnly || isAdmin);

  return (
    <>
      <header className="navbar no-print border-b border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md sticky top-0 z-40">
        <div className="container flex items-center justify-between h-16 px-4 md:px-8">
          {/* BRAND LOGO */}
          <a 
            href="/dashboard" 
            className="flex items-center gap-2.5 text-decoration-none group cursor-pointer"
            onClick={(e) => { e.preventDefault(); onSelectTab('dashboard'); }}
          >
            <div className="w-8 h-8 rounded-lg bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 font-bold text-xs flex items-center justify-center tracking-tight shadow-xs transition-transform group-hover:scale-105">
              CP
            </div>
            <div className="flex flex-col leading-tight">
              <span className="font-bold text-sm tracking-tight text-zinc-950 dark:text-white flex items-center gap-1.5">
                COLUMBIA <span className="font-normal text-zinc-500">PAGOS</span>
              </span>
              <span className="text-[10px] text-zinc-400 font-mono uppercase tracking-wider">Gestión Financiera</span>
            </div>
          </a>

          {/* SEARCH SHORTCUT PILL (CMD+K) */}
          <button
            type="button"
            onClick={() => setIsCmdPaletteOpen && setIsCmdPaletteOpen(true)}
            className="hidden lg:flex items-center gap-2 px-2.5 py-1 text-xs text-zinc-500 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md border border-zinc-200 dark:border-zinc-700 cursor-pointer transition-colors"
          >
            <span className="text-xs">🔍</span>
            <span className="text-zinc-600 dark:text-zinc-300 font-medium">Buscar o comandar...</span>
            <kbd className="px-1 text-[10px] font-mono bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded text-zinc-400">⌘K</kbd>
          </button>

          {/* NAVIGATION LINKS */}
          <nav className="hidden md:flex items-center gap-1">
            {navItems.map((item) => {
              const isActive = activeTab === item.key || (item.key === 'configuracoes' && activeTab === 'backup');
              const Icon = item.icon;
              return (
                <a
                  key={item.key}
                  href={item.path}
                  onClick={(e) => {
                    e.preventDefault();
                    onSelectTab(item.key);
                  }}
                  className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all cursor-pointer select-none text-decoration-none ${
                    isActive
                      ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-950 shadow-xs'
                      : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800'
                  }`}
                >
                  {typeof Icon === 'string' ? <span>{Icon}</span> : <Icon size={14} className={isActive ? 'text-white dark:text-zinc-950' : 'text-zinc-500'} />}
                  {item.label}
                </a>
              );
            })}
          </nav>

          {/* ACTIONS */}
          <div className="flex items-center gap-2">
            {/* AUDITOR BADGE */}
            {!isAdmin && (
              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-md bg-blue-50 text-blue-800 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800">
                <span>🏛️</span>
                <span>Modo Consulta Institucional (Solo Lectura)</span>
              </span>
            )}

            {/* WHATSAPP TRIGGER (ADMIN ONLY) */}
            {isAdmin && (
              <button
                type="button"
                onClick={() => setIsWhatsAppModalOpen && setIsWhatsAppModalOpen(true)}
                className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold rounded-md border border-emerald-300 bg-emerald-50 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400 dark:border-emerald-800 hover:bg-emerald-100 transition-colors cursor-pointer"
                title="Copiar Resumen para WhatsApp"
              >
                <span>💬</span>
                <span>WhatsApp</span>
              </button>
            )}

            {/* NUEVO MOVIMIENTO (ADMIN ONLY) */}
            {isAdmin && (
              <Button 
                variant="default" 
                size="sm"
                onClick={onOpenNewTx}
                className="flex items-center gap-1.5 font-medium cursor-pointer"
              >
                <Lucide.Plus size={15} />
                <span className="hidden sm:inline">Nuevo Movimiento</span>
                <span className="sm:hidden">Nuevo</span>
              </Button>
            )}

            <Button
              variant="outline"
              size="icon"
              onClick={toggleTheme}
              title="Cambiar Modo Claro / Oscuro"
              className="cursor-pointer"
            >
              {theme === 'dark' ? <Lucide.Sun size={15} /> : <Lucide.Moon size={15} />}
            </Button>

            {/* USER & LOGOUT */}
            {user && (
              <div className="flex items-center gap-1 pl-2 border-l border-zinc-200 dark:border-zinc-800">
                <span 
                  className="hidden xl:inline-block text-[11px] font-mono text-zinc-500 max-w-[130px] truncate" 
                  title={user.email}
                >
                  {user.email}
                </span>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={logout}
                  title={`Cerrar sesión (${user.email || ''})`}
                  className="text-zinc-500 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/40 cursor-pointer"
                >
                  <Lucide.LogOut size={15} />
                </Button>
              </div>
            )}
          </div>
        </div>
      </header>

      {/* MOBILE BOTTOM NAVIGATION BAR */}
      <div className="mobile-bottom-bar md:hidden no-print">
        <button
          type="button"
          onClick={() => onSelectTab('dashboard')}
          className={`flex flex-col items-center justify-center flex-1 py-1 text-[10px] font-medium transition-colors ${
            activeTab === 'dashboard' ? 'text-zinc-950 dark:text-white font-bold' : 'text-zinc-400 hover:text-zinc-700'
          }`}
        >
          <span className="text-base mb-0.5">📊</span>
          <span>Panel</span>
        </button>

        <button
          type="button"
          onClick={() => onSelectTab('lancamentos')}
          className={`flex flex-col items-center justify-center flex-1 py-1 text-[10px] font-medium transition-colors ${
            activeTab === 'lancamentos' ? 'text-zinc-950 dark:text-white font-bold' : 'text-zinc-400 hover:text-zinc-700'
          }`}
        >
          <span className="text-base mb-0.5">📑</span>
          <span>Movimientos</span>
        </button>

        {/* FLOATING QUICK ADD BUTTON */}
        <button
          type="button"
          onClick={onOpenNewTx}
          className="w-11 h-11 -mt-5 rounded-full bg-zinc-950 text-white flex items-center justify-center shadow-lg hover:scale-105 active:scale-95 transition-transform"
          title="Nuevo Movimiento"
        >
          <span className="text-xl font-bold">+</span>
        </button>

        <button
          type="button"
          onClick={() => onSelectTab('proyecciones')}
          className={`flex flex-col items-center justify-center flex-1 py-1 text-[10px] font-medium transition-colors ${
            activeTab === 'proyecciones' ? 'text-zinc-950 dark:text-white font-bold' : 'text-zinc-400 hover:text-zinc-700'
          }`}
        >
          <span className="text-base mb-0.5">🔮</span>
          <span>Futuros</span>
        </button>

        <button
          type="button"
          onClick={() => setIsCmdPaletteOpen && setIsCmdPaletteOpen(true)}
          className="flex flex-col items-center justify-center flex-1 py-1 text-[10px] font-medium text-zinc-400 hover:text-zinc-700"
        >
          <span className="text-base mb-0.5">🔍</span>
          <span>Buscar</span>
        </button>
      </div>
    </>
  );
}

function StatCard({ 
  title, 
  value, 
  helper, 
  badgeText, 
  badgeType = 'default', 
  isHighlight = false,
  colorScheme = 'default',
  prefix = null 
}) {
  const { Card } = window.Shadcn;

  // Determina cor do valor e do badge
  let valueColorClass = 'text-zinc-950';
  let badgeClasses = 'text-[10px] py-0.5 px-2 rounded-full uppercase font-mono font-bold tracking-tight ';
  let cardBorderClass = 'border-zinc-200';

  if (colorScheme === 'emerald' || badgeType === 'favorable') {
    valueColorClass = 'text-emerald-600';
    badgeClasses += 'bg-emerald-50 text-emerald-700 border border-emerald-300';
    if (isHighlight) cardBorderClass = 'border-emerald-500 ring-1 ring-emerald-500 bg-emerald-50/20';
  } else if (colorScheme === 'rose' || badgeType === 'unfavorable') {
    valueColorClass = 'text-rose-600';
    badgeClasses += 'bg-rose-50 text-rose-700 border border-rose-300';
    if (isHighlight) cardBorderClass = 'border-rose-500 ring-1 ring-rose-500 bg-rose-50/20';
  } else if (colorScheme === 'amber' || badgeType === 'warning') {
    valueColorClass = 'text-amber-600';
    badgeClasses += 'bg-amber-50 text-amber-700 border border-amber-300';
    if (isHighlight) cardBorderClass = 'border-amber-500 ring-1 ring-amber-500 bg-amber-50/20';
  } else if (colorScheme === 'blue') {
    valueColorClass = 'text-blue-600';
    badgeClasses += 'bg-blue-50 text-blue-700 border border-blue-300';
  } else {
    badgeClasses += 'bg-zinc-100 text-zinc-800 border border-zinc-200';
    if (isHighlight) cardBorderClass = 'border-zinc-950 ring-1 ring-zinc-950 bg-zinc-50/50';
  }

  return (
    <Card className={`${cardBorderClass} p-5 transition-all hover:shadow-xs`}>
      <div className="flex items-center justify-between pb-2">
        <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{title}</span>
        {badgeText && (
          <span className={badgeClasses}>
            {badgeText}
          </span>
        )}
      </div>
      <div className={`text-2xl font-bold tracking-tight my-1 font-mono ${valueColorClass}`}>
        {prefix && <span className="mr-1 text-xl">{prefix}</span>}
        {value}
      </div>
      {helper && <div className="text-xs text-zinc-500 mt-1 leading-relaxed">{helper}</div>}
    </Card>
  );
}

window.Navbar = Navbar;
window.StatCard = StatCard;