'use client';

import { usePortal } from '@/lib/PortalContext';
import { Icon } from './Icons';

interface Tab {
  id: string;
  label: string;
  icon: string;
}

interface HeaderProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
  tabs: Tab[];
}

export function Header({ activeTab, onTabChange, tabs }: HeaderProps) {
  const { darkMode, setDarkMode, refreshHealth, isRefreshing } = usePortal();

  return (
    <header className="sticky top-0 z-50 bg-white dark:bg-stone-950 border-b border-slate-200 dark:border-stone-800">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* Top bar */}
        <div className="py-4 flex items-center justify-between">
          {/* Logo / Title */}
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-gradient-to-br from-slate-700 to-slate-900 dark:from-stone-600 dark:to-stone-800">
              <Icon name="server" size={18} className="text-white" />
            </div>
            <div>
              <h1 className="font-bold text-lg text-slate-900 dark:text-stone-100">
                NUC Portal
              </h1>
              <p className="text-xs text-slate-500 dark:text-stone-500">
                192.168.1.3
              </p>
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2">
            {/* Refresh button */}
            <button
              onClick={refreshHealth}
              disabled={isRefreshing}
              className="p-2 rounded-lg bg-slate-100 dark:bg-stone-900 border border-slate-200 dark:border-stone-800 hover:bg-slate-200 dark:hover:bg-stone-800 disabled:opacity-50 transition-colors"
              title="Refresh health status"
            >
              <Icon
                name="refresh-cw"
                size={18}
                className={`text-slate-600 dark:text-stone-400 ${isRefreshing ? 'animate-spin' : ''}`}
              />
            </button>

            {/* Dark mode toggle */}
            <button
              onClick={() => setDarkMode(!darkMode)}
              className="p-2 rounded-lg bg-slate-100 dark:bg-stone-900 border border-slate-200 dark:border-stone-800 hover:bg-slate-200 dark:hover:bg-stone-800 transition-colors"
              title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
            >
              <Icon
                name={darkMode ? 'sun' : 'moon'}
                size={18}
                className="text-slate-600 dark:text-stone-400"
              />
            </button>
          </div>
        </div>

        {/* Tabs */}
        <nav className="flex gap-1 mt-2">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-none cursor-pointer rounded-t-lg transition-all whitespace-nowrap ${
                activeTab === tab.id
                  ? 'bg-slate-100 dark:bg-stone-800 text-slate-900 dark:text-stone-50'
                  : 'bg-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300'
              }`}
            >
              <Icon name={tab.icon} size={16} />
              {tab.label}
            </button>
          ))}
        </nav>
      </div>
    </header>
  );
}