interface HeaderProps {
  title: string;
  subtitle: string;
  stats: {
    total: number;
    completed: number;
    inProgress: number;
    todo: number;
    completionRate: number;
  };
}

export function Header({ title, subtitle, stats }: HeaderProps) {
  return (
    <header className="bg-slate-900/80 backdrop-blur-sm border-b border-slate-700/50 shadow-lg shadow-slate-900/20">
      <div className="container mx-auto px-6 py-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
          {/* Titre tech avec glow */}
          <div className="flex items-center gap-4">
            <div className="w-3 h-3 bg-cyan-400 rounded-full animate-pulse shadow-cyan-400/50 shadow-lg"></div>
            <div>
              <h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
                {title}
              </h1>
              <p className="text-slate-400 mt-1 font-mono text-sm">
                {subtitle}
              </p>
            </div>
          </div>

          {/* Stats tech dashboard */}
          <div className="flex flex-wrap gap-3">
            <StatCard 
              label="TOTAL" 
              value={String(stats.total).padStart(2, '0')} 
              color="blue"
            />
            <StatCard 
              label="DONE" 
              value={String(stats.completed).padStart(2, '0')} 
              color="green"
            />
            <StatCard 
              label="ACTIVE" 
              value={String(stats.inProgress).padStart(2, '0')} 
              color="yellow"
            />
            <StatCard 
              label="QUEUE" 
              value={String(stats.todo).padStart(2, '0')} 
              color="gray"
            />
            <StatCard 
              label="RATE" 
              value={`${stats.completionRate}%`} 
              color="purple"
            />
          </div>
        </div>
      </div>
    </header>
  );
}

interface StatCardProps {
  label: string;
  value: number | string;
  color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
}

function StatCard({ label, value, color }: StatCardProps) {
  const techStyles = {
    blue: {
      bg: 'bg-slate-800/50',
      border: 'border-cyan-500/30',
      text: 'text-cyan-300',
      glow: 'shadow-cyan-500/20'
    },
    green: {
      bg: 'bg-slate-800/50',
      border: 'border-emerald-500/30',
      text: 'text-emerald-300',
      glow: 'shadow-emerald-500/20'
    },
    yellow: {
      bg: 'bg-slate-800/50',
      border: 'border-yellow-500/30',
      text: 'text-yellow-300',
      glow: 'shadow-yellow-500/20'
    },
    gray: {
      bg: 'bg-slate-800/50',
      border: 'border-slate-500/30',
      text: 'text-slate-300',
      glow: 'shadow-slate-500/20'
    },
    purple: {
      bg: 'bg-slate-800/50',
      border: 'border-purple-500/30',
      text: 'text-purple-300',
      glow: 'shadow-purple-500/20'
    }
  };

  const style = techStyles[color];

  return (
    <div className={`${style.bg} ${style.border} border rounded-lg px-3 py-2 ${style.glow} shadow-lg backdrop-blur-sm hover:${style.border.replace('/30', '/50')} transition-all duration-300`}>
      <div className={`text-xs font-mono font-bold ${style.text} opacity-75 uppercase tracking-wider`}>
        {label}
      </div>
      <div className={`text-lg font-mono font-bold ${style.text}`}>
        {value}
      </div>
    </div>
  );
}