// Top Navbar & Navigation Component - Sharp Square Cyber Theme
window.Navbar = function Navbar({
  user,
  activeTab,
  onSelectTab,
  appsCount,
  licensesCount,
  onLogout,
  onRefresh,
  isRefreshing,
  appName
}) {
  const isOwner = user?.role === 'owner';

  const navTabs = [
    { id: 'dashboard', label: 'ภาพรวม', icon: 'fa-chart-pie' },
    { id: 'apps', label: 'แอปพลิเคชัน', icon: 'fa-cube', badge: appsCount },
    { id: 'licenses', label: 'จัดการคีย์', icon: 'fa-key', badge: licensesCount },
    { id: 'hwid-links', label: 'ลิงก์รีเซ็ต HWID', icon: 'fa-link' },
    { id: 'status', label: 'สถานะระบบ', icon: 'fa-gauge-high' },
    { id: 'api-docs', label: 'เอกสาร API', icon: 'fa-code' },
    ...(isOwner
      ? [
          { id: 'team', label: 'จัดการทีมงาน', icon: 'fa-users-gear' },
          { id: 'security', label: 'แบนเครื่อง & IP', icon: 'fa-shield-halved' }
        ]
      : []),
    { id: 'logs', label: 'ประวัติ', icon: 'fa-clock-rotate-left' },
    { id: 'settings', label: 'ตั้งค่า', icon: 'fa-gear' }
  ];

  return (
    <header className="sticky top-0 z-40 bg-[#0E1626]/95 border-b border-[#1E2D4A] backdrop-blur-md shadow-xl w-full">
      {/* Top Header Bar */}
      <div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 gap-2">
          {/* Logo & Title */}
          <div className="flex items-center gap-2.5 sm:gap-3 min-w-0">
            <img
              src="logo.png"
              alt="IceX Wolf Logo"
              className="w-9 h-9 sm:w-10 sm:h-10 object-contain logo-glow shrink-0"
            />
            <div className="min-w-0">
              <div className="flex items-center gap-1.5 sm:gap-2">
                <span className="text-base sm:text-lg font-bold text-white tracking-wider font-brand truncate">
                  {appName || 'IceX Modz'}
                </span>
                <span className="text-[9px] sm:text-[10px] font-mono px-1.5 py-0.5 rounded-none bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 shrink-0">
                  PRO
                </span>
              </div>
              <div className="flex items-center gap-1.5 text-[10px] sm:text-[11px] text-slate-400 truncate">
                <span className="w-1.5 h-1.5 rounded-full bg-[#00FF9D] badge-pulse shrink-0"></span>
                <span className="text-[#00FF9D] font-mono shrink-0">Online</span>
                <span className="text-slate-600 hidden xs:inline">&bull;</span>
                <span className="text-slate-400 font-mono hidden sm:inline truncate">ID: {user?.owner_id || '84920183'}</span>
              </div>
            </div>
          </div>

          {/* Right Controls */}
          <div className="flex items-center gap-1.5 sm:gap-2.5 shrink-0">
            {/* Refresh */}
            <button
              onClick={onRefresh}
              disabled={isRefreshing}
              className="p-2 sm:px-3 sm:py-1.5 rounded-none text-slate-400 hover:text-white bg-[#080C14] hover:bg-[#131D31] border border-[#1E2D4A] transition flex items-center gap-1.5 text-xs font-medium"
              title="Refresh Data"
            >
              <i className={`fa-solid fa-rotate-right text-xs ${isRefreshing ? 'fa-spin text-[#1D63FF]' : ''}`}></i>
              <span className="hidden md:inline">รีเฟรช</span>
            </button>

            {/* Role Badge */}
            {isOwner ? (
              <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-none bg-amber-500/10 border border-amber-500/30 text-amber-400 text-xs font-mono font-semibold">
                <i className="fa-solid fa-crown text-[10px]"></i>
                <span className="hidden xs:inline">OWNER</span>
              </div>
            ) : (
              <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-none bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 text-xs font-mono font-semibold">
                <i className="fa-solid fa-user-tag text-[10px]"></i>
                <span className="hidden xs:inline">RESELLER</span>
              </div>
            )}

            {/* User Profile Tag */}
            <div className="hidden lg:flex items-center gap-2 px-2.5 py-1 rounded-none bg-[#080C14] border border-[#1E2D4A] text-xs font-mono text-slate-300">
              <i className="fa-solid fa-circle-user text-cyan-400"></i>
              <span className="truncate max-w-[100px]">{user?.username}</span>
            </div>

            {/* Logout */}
            <button
              onClick={onLogout}
              className="px-2.5 sm:px-3 py-1.5 rounded-none bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/30 text-rose-400 text-xs font-semibold transition flex items-center gap-1.5"
              title="Logout"
            >
              <i className="fa-solid fa-arrow-right-from-bracket text-xs"></i>
              <span className="hidden sm:inline">Logout</span>
            </button>
          </div>
        </div>

        {/* Navigation Tabs Bar - Horizontally Scrollable on Mobile */}
        <div className="flex items-center gap-1.5 sm:gap-2 overflow-x-auto py-2 border-t border-[#1E2D4A]/60 no-scrollbar">
          {navTabs.map((tab) => {
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                onClick={() => onSelectTab(tab.id)}
                className={`px-3 py-1.5 rounded-none text-xs font-medium transition flex items-center gap-1.5 whitespace-nowrap shrink-0 border ${
                  isActive
                    ? 'bg-[#1D63FF] text-white border-[#1D63FF] font-semibold'
                    : 'text-slate-400 hover:text-white bg-[#080C14]/60 hover:bg-[#131D31] border-[#1E2D4A]'
                }`}
              >
                <i className={`fa-solid ${tab.icon} text-xs ${isActive ? 'text-white' : 'text-slate-400'}`}></i>
                <span>{tab.label}</span>
                {tab.badge !== undefined && (
                  <span
                    className={`text-[10px] font-mono px-1.5 py-0.2 rounded-none border ${
                      isActive
                        ? 'bg-white/20 text-white border-white/30'
                        : 'bg-[#131D31] text-slate-400 border-[#1E2D4A]'
                    }`}
                  >
                    {tab.badge}
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </header>
  );
};