import React from 'react';
import { Player, Decade } from '../types';
import { Award, Flame, Zap } from 'lucide-react';

interface TimeSyncConsoleProps {
  players: Player[];
  activePlayerIndex: number;
  gameMode: 'SOLO' | 'COMPETENCIA';
}

export const TimeSyncConsole: React.FC<TimeSyncConsoleProps> = ({
  players,
  activePlayerIndex,
  gameMode,
}) => {
  const decades: Decade[] = ['70', '80', '90'];

  return (
    <div className="w-full max-w-4xl mx-auto bg-[#1a1722] border-2 border-amber-600/40 rounded-2xl p-3.5 sm:p-5 shadow-2xl shadow-black relative overflow-hidden">
      {/* Brass Header Badge */}
      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-amber-500/20 pb-3 mb-3">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-amber-500 animate-pulse"></div>
          <h2 className="text-xs sm:text-sm font-righteous tracking-widest text-amber-300 uppercase">
            Consola de Control de Sincronización Temporal
          </h2>
        </div>
        <div className="text-[10px] font-bold uppercase tracking-widest text-amber-400/80 bg-amber-950/60 border border-amber-500/30 px-2.5 py-1 rounded-md">
          {gameMode === 'SOLO' ? 'MODO SOLO • REGISTRO TEMPORAL' : 'MODO COMPETENCIA MULTIJUGADOR'}
        </div>
      </div>

      {/* Players Pegboard / Score Display */}
      <div className={`grid gap-3 ${players.length > 2 ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4' : 'grid-cols-1 sm:grid-cols-2'}`}>
        {players.map((player, idx) => {
          const isActive = gameMode === 'COMPETENCIA' && idx === activePlayerIndex;

          return (
            <div
              key={player.id}
              className={`relative rounded-xl p-3.5 transition-all border ${
                isActive
                  ? 'bg-gradient-to-b from-amber-900/60 via-[#231e30] to-[#161320] border-amber-400 shadow-lg shadow-amber-500/20 ring-2 ring-amber-400/50 scale-[1.02]'
                  : 'bg-[#15121c] border-amber-500/20 opacity-90 hover:opacity-100'
              }`}
            >
              {/* Active Player Turn Badge */}
              {isActive && (
                <div className="absolute -top-2.5 right-3 bg-gradient-to-r from-amber-500 to-orange-500 text-black text-[9px] font-extrabold px-2 py-0.5 rounded-full uppercase tracking-wider shadow">
                  TURNO ACTUAL
                </div>
              )}

              {/* Player Header */}
              <div className="flex items-center justify-between gap-2 mb-2">
                <div className="flex items-center gap-2">
                  <span className="text-xl">{player.avatar}</span>
                  <div>
                    <h3 className="font-bold text-sm text-amber-100 truncate max-w-[120px]">
                      {player.name}
                    </h3>
                    <div className="flex items-center gap-1 text-[10px] text-amber-300/70">
                      <Flame className="w-3 h-3 text-orange-400" />
                      <span>Racha: <strong className="text-amber-300">{player.streak}</strong></span>
                    </div>
                  </div>
                </div>

                {/* Score Counter */}
                <div className="text-right">
                  <div className="font-pixel text-lg text-amber-400 drop-shadow">
                    {player.score}
                  </div>
                  <span className="text-[9px] font-bold text-amber-200/50 uppercase tracking-widest">
                    Puntos
                  </span>
                </div>
              </div>

              {/* Decade Tokens (Fichas de Sincronización 70s, 80s, 90s) */}
              <div className="mt-2.5 pt-2 border-t border-amber-500/15">
                <div className="text-[9px] font-bold text-amber-300/60 uppercase tracking-wider mb-1.5 flex items-center justify-between">
                  <span>Fichas Décadas</span>
                  <Award className="w-3 h-3 text-amber-400" />
                </div>
                <div className="grid grid-cols-3 gap-1.5">
                  {decades.map(decade => {
                    const hasToken = player.decadeTokens[decade];
                    const label = decade === '70' ? '70' : decade === '80' ? '80' : '90';
                    const colorClass = 
                      decade === '70' ? 'from-amber-500 to-yellow-600' :
                      decade === '80' ? 'from-red-500 to-pink-600' : 'from-cyan-500 to-teal-600';

                    return (
                      <div
                        key={decade}
                        title={`Ficha de Sincronización ${label}: ${hasToken ? 'Conseguida' : 'Pendiente'}`}
                        className={`flex items-center justify-center gap-1 py-1 px-1.5 rounded-lg border text-[10px] font-extrabold transition-all ${
                          hasToken
                            ? `bg-gradient-to-r ${colorClass} text-black border-amber-300 shadow-md shadow-amber-500/20 animate-pulse-glow`
                            : 'bg-zinc-900/90 border-zinc-800 text-zinc-600 opacity-60'
                        }`}
                      >
                        <Zap className={`w-2.5 h-2.5 ${hasToken ? 'text-black' : 'text-zinc-600'}`} />
                        <span>{label}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};