import { useQuery } from '@tanstack/react-query';
import { rommApiClient } from '../api/client';
import { useInputMode } from '../context/InputModeContext';

export const TopNav = () => {
  const { mode } = useInputMode();

  const { data: stats } = useQuery({
    queryKey: ['stats'],
    queryFn: () => rommApiClient.fetchStats(),
    staleTime: 60000, // 1 minute caching
  });

  const formatBytes = (bytes?: number) => {
    if (!bytes) return '--';
    const gb = bytes / (1024 * 1024 * 1024);
    if (gb >= 1024) return `${(gb / 1024).toFixed(1)} TB`;
    return `${Math.round(gb)} GB`;
  };
  return (
    <header className="fixed top-0 right-0 left-64 h-16 z-50 bg-[#10131f]/80 backdrop-blur-2xl flex items-center justify-between px-12 border-b border-white/5">
      <div className="flex items-center gap-6 w-full">
        <div className="relative flex-1 max-w-md focus-within:ring-1 focus-within:ring-[#2563eb]/50 rounded-full overflow-hidden bg-[#070913] border border-white/5 transition-all outline-none shadow-inner">
          <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#c3c6d7] text-sm">search</span>
          <input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[11px] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
        </div>

        <div className="hidden xl:flex items-center gap-6 ml-4 geist-mono justify-end flex-1">
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="account_tree">account_tree</span>
            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="sports_esports">sports_esports</span>
            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="hard_drive">hard_drive</span>
            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
          </div>
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="save">save</span>
            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="history">history</span>
            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="photo_library">photo_library</span>
            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
          </div>

          <div className="w-px h-4 bg-white/10 mx-2"></div>

          {/* Active Hardware Indicator */}
          <div className="flex items-center justify-center w-8 h-8 bg-white/5 border border-white/5 rounded-full ring-1 ring-white/10 shadow-inner text-[#2563eb]" title={mode === 'gamepad' ? 'Gamepad Active' : 'Mouse/Keyboard Active'}>
            <span className="material-symbols-outlined text-[16px]" style={{ fontVariationSettings: "'FILL' 1" }}>
              {mode === 'gamepad' ? 'sports_esports' : 'mouse'}
            </span>
          </div>
        </div>
      </div>
    </header>
  );
};