import React from 'react';
import { X, HelpCircle, Music, Tv, Trophy, Boxes, Zap, Award } from 'lucide-react';
import { sound } from '../utils/audio';

interface RulesModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const RulesModal: React.FC<RulesModalProps> = ({ isOpen, onClose }) => {
  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-2xl max-h-[90vh] overflow-y-auto p-5 sm:p-7 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-5">
          <div className="p-3 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-400">
            <HelpCircle size={24} />
          </div>
          <div>
            <h2 className="font-righteous text-2xl text-amber-300">
              REGLAS DE RETRO•RE
            </h2>
            <p className="text-xs text-amber-200/60 uppercase tracking-widest">
              Manual del Pasado • Desde 2011
            </p>
          </div>
        </div>

        {/* Rules Body */}
        <div className="space-y-6 text-xs sm:text-sm leading-relaxed text-amber-100/90">
          {/* Story */}
          <section className="bg-zinc-900/60 p-4 rounded-2xl border border-amber-500/20">
            <h3 className="font-righteous text-amber-400 text-base mb-1">
              🎙️ ¡BIENVENIDOS AL PASADO!
            </h3>
            <p className="text-amber-200/80">
              RETRO•RE es el juego de trivia retro interactivo definitivo. Un viaje nostálgico que abarca las tres décadas doradas de la cultura popular moderna: <strong>Los 70's, Los 80's y Los 90's</strong>.
            </p>
          </section>

          {/* Decades */}
          <section className="space-y-2">
            <h3 className="font-righteous text-amber-300 text-base">
              ⏳ LAS TRES COORDENADAS TEMPORALES:
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
              <div className="bg-amber-950/40 p-3 rounded-xl border border-amber-500/30">
                <strong className="text-amber-300 block font-righteous mb-0.5">Los 70's</strong>
                <p className="text-[11px] text-amber-200/70">Funky, disco, rock progresivo y transición cultural.</p>
              </div>
              <div className="bg-red-950/40 p-3 rounded-xl border border-red-500/30">
                <strong className="text-red-300 block font-righteous mb-0.5">Los 80's</strong>
                <p className="text-[11px] text-amber-200/70">Neón, sintetizadores, superestrellas y taquillazos.</p>
              </div>
              <div className="bg-cyan-950/40 p-3 rounded-xl border border-cyan-500/30">
                <strong className="text-cyan-300 block font-righteous mb-0.5">Los 90's</strong>
                <p className="text-[11px] text-amber-200/70">Grunge, inicio de Internet, TV de culto y deportes de leyenda.</p>
              </div>
            </div>
          </section>

          {/* Categories */}
          <section className="space-y-2">
            <h3 className="font-righteous text-amber-300 text-base">
              🎯 LAS CUATRO CATEGORÍAS PRINCIPALES:
            </h3>
            <div className="grid grid-cols-2 gap-2 text-xs">
              <div className="flex items-center gap-2 bg-zinc-900 p-2.5 rounded-xl border border-amber-500/20">
                <Music className="w-4 h-4 text-amber-400 shrink-0" />
                <div>
                  <strong className="text-amber-300 block">MÚSICA</strong>
                  <span className="text-[10px] text-amber-200/60">Bandas, álbumes e himnos.</span>
                </div>
              </div>

              <div className="flex items-center gap-2 bg-zinc-900 p-2.5 rounded-xl border border-amber-500/20">
                <Tv className="w-4 h-4 text-red-400 shrink-0" />
                <div>
                  <strong className="text-red-300 block">CINE y TV</strong>
                  <span className="text-[10px] text-amber-200/60">Series, ALF y taquillas.</span>
                </div>
              </div>

              <div className="flex items-center gap-2 bg-zinc-900 p-2.5 rounded-xl border border-amber-500/20">
                <Trophy className="w-4 h-4 text-cyan-400 shrink-0" />
                <div>
                  <strong className="text-cyan-300 block">DEPORTES</strong>
                  <span className="text-[10px] text-amber-200/60">Atletas y momentos míticos.</span>
                </div>
              </div>

              <div className="flex items-center gap-2 bg-zinc-900 p-2.5 rounded-xl border border-amber-500/20">
                <Boxes className="w-4 h-4 text-emerald-400 shrink-0" />
                <div>
                  <strong className="text-emerald-300 block">EVENTOS</strong>
                  <span className="text-[10px] text-amber-200/60">Hitos históricos y modas.</span>
                </div>
              </div>
            </div>
          </section>

          {/* Modes */}
          <section className="bg-zinc-900/60 p-4 rounded-2xl border border-amber-500/20 space-y-2">
            <h3 className="font-righteous text-amber-400 text-base">
              🕹️ MODOS DE JUEGO:
            </h3>
            <div className="space-y-2 text-xs">
              <p>
                <strong className="text-amber-300">• UN SOLO JUGADOR:</strong> Modo contrarreloj. Responde preguntas consecutivas manteniendo rachas para conseguir multiplicadores de puntuación.
              </p>
              <p>
                <strong className="text-red-300">• MODO COMPETENCIA:</strong> Hasta 4 jugadores en el mismo dispositivo. Gira la rueda, responde correctamente y consigue las Fichas de Sincronización Temporal (70, 80, 90). ¡Gana el primero en reunir las tres fichas o llegar a 1000 puntos!
              </p>
            </div>
          </section>
        </div>

        {/* Footer */}
        <div className="mt-6 pt-4 border-t border-amber-500/20 text-center">
          <button
            onClick={() => {
              sound.playClick();
              onClose();
            }}
            className="px-6 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-black font-righteous text-sm shadow-md transition-all"
          >
            ¡ENTENDIDO, A JUGAR!
          </button>
        </div>
      </div>
    </div>
  );
};