import { useEffect, useState } from 'react'
import { Monitor, LogOut, Timer, User, ShieldCheck, RefreshCw, Plus } from 'lucide-react'
import { formatRelative } from '../lib/format'

export default function Header({ lastUpdate, onRefresh, onAddVps, refreshing, username, role, onLogout, onProfile, onAdmin, refreshInterval, onIntervalChange, intervalOptions }) {
  // Force un re-rendu périodique pour garder « il y a X » à jour
  const [, setTick] = useState(0)
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 10_000)
    return () => clearInterval(id)
  }, [])

  return (
    <header className="sticky top-0 z-40 border-b border-gray-800 bg-gray-900/80 backdrop-blur-md">
      <div className="max-w-7xl mx-auto px-4 py-2 flex items-center gap-2">
        <div className="flex items-center gap-2.5 min-w-0">
          <div className="p-1.5 rounded-lg bg-indigo-500/15 flex-shrink-0">
            <Monitor size={18} className="text-indigo-400" />
          </div>
          <span className="font-semibold truncate">VPS Monitor</span>
          {lastUpdate && (
            <span
              className="hidden md:block text-xs text-gray-500 ml-1 whitespace-nowrap"
              title={`Dernière actualisation à ${lastUpdate.toLocaleTimeString('fr-FR')}`}
            >
              · {formatRelative(lastUpdate)}
            </span>
          )}
        </div>

        <div className="flex-1" />

        <div className="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
          {/* Sélecteur d'intervalle */}
          <div className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-800 text-sm text-gray-400">
            <Timer size={13} className="flex-shrink-0" />
            <select
              value={refreshInterval}
              onChange={e => onIntervalChange(Number(e.target.value))}
              className="bg-transparent text-gray-300 text-xs outline-none cursor-pointer"
              aria-label="Intervalle d'actualisation automatique"
              title="Intervalle d'actualisation automatique"
            >
              {intervalOptions.map(o => (
                <option key={o.value} value={o.value}>{o.label}</option>
              ))}
            </select>
          </div>

          <button
            onClick={onRefresh}
            disabled={refreshing}
            aria-label="Actualiser maintenant (raccourci : R)"
            title="Actualiser maintenant (R)"
            className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg text-sm bg-gray-800 hover:bg-gray-700 disabled:opacity-50 transition-colors"
          >
            <RefreshCw size={14} className={refreshing ? 'animate-spin' : ''} />
            <span className="hidden lg:inline">Actualiser</span>
          </button>

          <button
            onClick={onAddVps}
            aria-label="Ajouter un VPS"
            title="Ajouter un VPS"
            className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg text-sm bg-indigo-600 hover:bg-indigo-500 transition-colors font-medium"
          >
            <Plus size={15} />
            <span className="hidden lg:inline">Ajouter un VPS</span>
          </button>

          {username && (
            <>
              {role === 'admin' && (
                <button
                  onClick={onAdmin}
                  aria-label="Administration"
                  title="Administration"
                  className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg text-sm bg-gray-800 hover:bg-gray-700 transition-colors text-violet-400 hover:text-violet-300"
                >
                  <ShieldCheck size={14} />
                  <span className="hidden lg:inline">Admin</span>
                </button>
              )}
              <button
                onClick={onProfile}
                aria-label={`Profil de ${username}`}
                title={`Profil (${username})`}
                className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg text-sm bg-gray-800 hover:bg-gray-700 transition-colors text-gray-400 hover:text-gray-200 max-w-[10rem]"
              >
                <User size={14} className="flex-shrink-0" />
                <span className="hidden sm:inline truncate">{username}</span>
              </button>
              <button
                onClick={onLogout}
                aria-label="Se déconnecter"
                title="Déconnexion"
                className="flex items-center px-2.5 py-1.5 rounded-lg text-sm bg-gray-800 hover:bg-gray-700 transition-colors text-gray-400 hover:text-gray-200"
              >
                <LogOut size={14} />
              </button>
            </>
          )}
        </div>
      </div>
    </header>
  )
}
