import React, { useState, useEffect } from 'react';
import { Clock, Shield, Download, Sun, Moon, Sparkles, LogOut } from 'lucide-react';
import { User, ActiveScreen } from '../types';

interface HeaderBarProps {
  currentScreen: ActiveScreen;
  onNavigate: (screen: ActiveScreen) => void;
  activeUser: User | null;
  onLogout: () => void;
  onOpenAdmin: () => void;
  onOpenExport: () => void;
  onStartRotation: () => void;
  theme: 'dark' | 'light';
  onToggleTheme: () => void;
  planningGapCount: number;
}

export const HeaderBar: React.FC<HeaderBarProps> = ({
  currentScreen,
  onNavigate,
  activeUser,
  onLogout,
  onOpenAdmin,
  onOpenExport,
  onStartRotation,
  theme,
  onToggleTheme,
  planningGapCount,
}) => {
  const [timeStr, setTimeStr] = useState<string>('');
  const [dateStr, setDateStr] = useState<string>('');

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTimeStr(
        now.toLocaleTimeString('fr-FR', {
          hour: '2-digit',
          minute: '2-digit',
        })
      );
      const formattedDate = now.toLocaleDateString('fr-FR', {
        weekday: 'short',
        day: 'numeric',
        month: 'short',
      });
      setDateStr(formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1));
    };
    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <header className="flex items-center justify-between pb-3 mb-3 border-b border-[var(--border)]">
      {/* Horloge & Date Kiosk */}
      <div className="flex items-center gap-3">
        <button
          onClick={() => onNavigate('dashboard')}
          className="text-left group cursor-pointer"
          title="Retour au Tableau de bord"
        >
          <div className="flex items-baseline gap-2">
            <span className="text-2xl font-bold tracking-tight text-[var(--ink)]">
              {timeStr}
            </span>
            <span className="text-xs font-semibold uppercase tracking-wider text-[var(--ink-soft)]">
              {dateStr}
            </span>
          </div>
          <p className="text-[11px] text-[var(--ink-soft)] font-medium m-0 leading-tight">
            Kiosk Soins Parents
          </p>
        </button>

        {planningGapCount > 0 && (
          <button
            onClick={() => onNavigate('presence')}
            className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-semibold rounded-full bg-red-950/80 text-red-300 border border-red-800 animate-pulse cursor-pointer"
            title="Trou de planning détecté"
          >
            <span>⚠️ Trou {planningGapCount}j</span>
          </button>
        )}
      </div>

      {/* Actions rapides Kiosk */}
      <div className="flex items-center gap-1.5">
        {/* Veille / Rotation manuelle */}
        <button
          onClick={onStartRotation}
          className="flex items-center gap-1 p-2 rounded-lg text-xs font-medium text-[var(--ink-soft)] hover:text-[var(--ink)] hover:bg-[var(--surface-alt)] border border-transparent hover:border-[var(--border)] transition-colors cursor-pointer"
          title="Mode veille & rotation d'infos"
        >
          <Sparkles className="w-4 h-4" />
          <span className="hidden sm:inline">Veille</span>
        </button>

        {/* Thème Kiosk (Dark OLED vs Light Papier) */}
        <button
          onClick={onToggleTheme}
          className="p-2 rounded-lg text-[var(--ink-soft)] hover:text-[var(--ink)] hover:bg-[var(--surface-alt)] border border-transparent hover:border-[var(--border)] transition-colors cursor-pointer"
          title={theme === 'dark' ? 'Passer en mode clair' : 'Passer en mode sombre'}
        >
          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
        </button>

        {/* Export Fichiers OVH Starter */}
        <button
          onClick={onOpenExport}
          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-[var(--surface-alt)] text-[var(--ink)] border border-[var(--border)] hover:bg-[var(--border)] transition-colors cursor-pointer"
          title="Télécharger les fichiers PHP / MySQL pour OVH Starter"
        >
          <Download className="w-3.5 h-3.5 text-blue-400" />
          <span className="hidden sm:inline">Pack OVH</span>
        </button>

        {/* Administration */}
        <button
          onClick={onOpenAdmin}
          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-[var(--surface)] text-[var(--ink)] border border-[var(--border)] hover:bg-[var(--surface-alt)] transition-colors cursor-pointer"
          title="Administration & Configuration"
        >
          <Shield className="w-3.5 h-3.5 text-amber-500" />
          <span className="hidden sm:inline">Admin</span>
        </button>

        {/* Déconnexion si session active */}
        {activeUser && (
          <button
            onClick={onLogout}
            className="p-1.5 rounded-lg text-xs font-medium bg-red-950/50 text-red-300 border border-red-800/60 hover:bg-red-900/60 transition-colors cursor-pointer"
            title={`Quitter la session de ${activeUser.nom}`}
          >
            <LogOut className="w-3.5 h-3.5" />
          </button>
        )}
      </div>
    </header>
  );
};