import React from 'react';
import { X, Trophy, Flame, Calendar, Trash2 } from 'lucide-react';
import { HighScoreRecord } from '../types';
import { sound } from '../utils/audio';

interface HighScoresModalProps {
  isOpen: boolean;
  onClose: () => void;
  highScores: HighScoreRecord[];
  onClearScores: () => void;
}

export const HighScoresModal: React.FC<HighScoresModalProps> = ({
  isOpen,
  onClose,
  highScores,
  onClearScores,
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in">
      <div className="bg-[#1a1724] border-2 border-amber-500/40 rounded-3xl w-full max-w-lg max-h-[85vh] overflow-y-auto p-5 sm:p-6 shadow-2xl relative text-amber-100">
        {/* Close Button */}
        <button
          onClick={() => {
            sound.playClick();
            onClose();
          }}
          className="absolute top-4 right-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-amber-300 border border-zinc-700 transition-colors"
        >
          <X size={18} />
        </button>

        {/* Modal Header */}
        <div className="flex items-center gap-3 border-b border-amber-500/20 pb-4 mb-4">
          <div className="p-3 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-400">
            <Trophy size={24} />
          </div>
          <div>
            <h2 className="font-righteous text-2xl text-amber-300">
              HALL DE LA FAMA
            </h2>
            <p className="text-xs text-amber-200/60 uppercase tracking-widest">
              Mejores Puntuaciones Solo
            </p>
          </div>
        </div>

        {/* Scores List */}
        {highScores.length === 0 ? (
          <div className="py-12 text-center text-amber-200/50">
            <p className="text-sm">Aún no hay puntuaciones registradas.</p>
            <p className="text-xs mt-1 text-amber-200/40">¡Juega una partida en Modo Solo para estrenar el salón de la fama!</p>
          </div>
        ) : (
          <div className="space-y-2 mb-6">
            {highScores.map((record, index) => (
              <div
                key={record.id || index}
                className="flex items-center justify-between gap-3 p-3 rounded-xl bg-zinc-900/80 border border-amber-500/20 hover:border-amber-500/40 transition-colors"
              >
                <div className="flex items-center gap-3">
                  <span className={`w-7 h-7 rounded-full flex items-center justify-center font-righteous text-xs ${
                    index === 0 ? 'bg-amber-400 text-black shadow-md shadow-amber-400/30' :
                    index === 1 ? 'bg-zinc-300 text-black' :
                    index === 2 ? 'bg-amber-700 text-white' : 'bg-zinc-800 text-zinc-400'
                  }`}>
                    #{index + 1}
                  </span>
                  <div>
                    <h4 className="font-bold text-sm text-amber-100">{record.playerName}</h4>
                    <div className="flex items-center gap-2 text-[10px] text-amber-300/60 mt-0.5">
                      <span>Nivel {record.difficulty}</span>
                      <span>•</span>
                      <span className="flex items-center gap-0.5"><Flame size={10} className="text-orange-400" /> {record.streak} racha</span>
                      <span>•</span>
                      <span>{record.date}</span>
                    </div>
                  </div>
                </div>

                <div className="font-pixel text-base text-amber-400">
                  {record.score}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Footer Actions */}
        <div className="flex items-center justify-between gap-2 pt-3 border-t border-amber-500/20">
          {highScores.length > 0 && (
            <button
              onClick={() => {
                sound.playClick();
                onClearScores();
              }}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-red-950/60 hover:bg-red-900 border border-red-500/30 text-red-300 text-xs font-bold transition-colors"
            >
              <Trash2 size={13} />
              <span>Borrar Historial</span>
            </button>
          )}

          <button
            onClick={() => {
              sound.playClick();
              onClose();
            }}
            className="px-5 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-black font-righteous text-xs shadow-md transition-all ml-auto"
          >
            CERRAR
          </button>
        </div>
      </div>
    </div>
  );
};