/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useMemo } from 'react';
import { 
  Coins, 
  Sparkles, 
  Hammer, 
  Search, 
  Plus, 
  ShieldAlert, 
  Cpu, 
  Flame, 
  Check, 
  Zap,
  RotateCcw,
  Palette
} from 'lucide-react';
import { GameStats, Entity, RarityType, Upgrade } from '../types';
import { ENTITIES, RARITIES } from '../data/entities';
import { voidAudio } from '../utils/audio';

interface JulioModPanelProps {
  stats: GameStats;
  upgrades: Upgrade[];
  onUpdateStats: (newFields: Partial<GameStats>) => void;
  onSpawnEntity: (entity: Entity) => void;
  onUpdateUpgrades: (newUpgrades: Upgrade[]) => void;
  onSetUnlockedThemes: (themes: string[]) => void;
  addTerminalLog: (msg: string, type: 'info' | 'success' | 'warn' | 'error', color?: string) => void;
}

export const JulioModPanel: React.FC<JulioModPanelProps> = ({
  stats,
  upgrades,
  onUpdateStats,
  onSpawnEntity,
  onUpdateUpgrades,
  onSetUnlockedThemes,
  addTerminalLog
}) => {
  const [customCoins, setCustomCoins] = useState<string>(stats.coins.toString());
  const [customLuck, setCustomSuerte] = useState<string>(stats.luckMultiplier.toString());
  const [searchQuery, setSearchQuery] = useState('');
  const [rarityFilter, setRarityFilter] = useState<string>('all');

  const handleSetCoins = (e: React.FormEvent) => {
    e.preventDefault();
    const val = parseInt(customCoins);
    if (!isNaN(val) && val >= 0) {
      onUpdateStats({ coins: val });
      voidAudio.playClick();
      addTerminalLog(`MOD MULTIVERSE: Monedas modificadas directamente a [${val.toLocaleString()}]`, 'warn', '#ef4444');
    }
  };

  const handleSetLuck = (e: React.FormEvent) => {
    e.preventDefault();
    const val = parseFloat(customLuck);
    if (!isNaN(val) && val >= 0) {
      onUpdateStats({ luckMultiplier: val });
      voidAudio.playClick();
      addTerminalLog(`MOD MULTIVERSE: Multiplicador de Suerte fijado en [${val.toFixed(2)}x]`, 'warn', '#ef4444');
    }
  };

  const handleQuickAddCoins = (amount: number) => {
    const val = stats.coins + amount;
    onUpdateStats({ coins: val });
    setCustomCoins(val.toString());
    voidAudio.playBeep(600, 0.1, 'sine');
    addTerminalLog(`MOD MULTIVERSE: Inyectada suma rápida de +${amount.toLocaleString()} Monedas`, 'warn', '#ef4444');
  };

  const handleQuickSetLuck = (multiplier: number) => {
    onUpdateStats({ luckMultiplier: multiplier });
    setCustomSuerte(multiplier.toString());
    voidAudio.playBeep(880, 0.1, 'triangle');
    addTerminalLog(`MOD MULTIVERSE: Multiplicador cuántico alterado a [${multiplier.toFixed(1)}x]`, 'warn', '#ef4444');
  };

  const handleMaxUpgrades = () => {
    const maxed = upgrades.map((up) => ({
      ...up,
      level: up.maxLevel,
      cost: Math.floor(up.cost * Math.pow(1.85, up.maxLevel - up.level))
    }));
    onUpdateUpgrades(maxed);
    onUpdateStats({
      luckMultiplier: 1 + (maxed.find(u => u.id === 'luck')?.level || 20 - 1) * 0.15,
      rollSpeedMultiplier: 1 + (maxed.find(u => u.id === 'speed_boost')?.level || 5 - 1) * 0.2
    });
    voidAudio.playRaritySfx('divine');
    addTerminalLog(`MOD MULTIVERSE: ¡Mejoras de hardware de terminal maximizadas al límite extremo!`, 'warn', '#fbbf24');
  };

  const handleUnlockThemes = () => {
    const allThemeIds = ['matrix', 'neon', 'glitch', 'classic', 'divine-theme', 'julio'];
    onSetUnlockedThemes(allThemeIds);
    voidAudio.playBeep(520, 0.25, 'sine');
    addTerminalLog(`MOD MULTIVERSE: Desencriptación masiva. Todos los esquemas de color liberados.`, 'success', '#4ade80');
  };

  // Filter items matching query and filters
  const filteredEntities = useMemo(() => {
    return ENTITIES.filter((ent) => {
      const matchSearch = ent.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          ent.description.toLowerCase().includes(searchQuery.toLowerCase());
      const matchRarity = rarityFilter === 'all' || ent.rarity === rarityFilter;
      return matchSearch && matchRarity;
    });
  }, [searchQuery, rarityFilter]);

  const handleSpawn = (entity: Entity) => {
    voidAudio.playRaritySfx(entity.rarity);
    onSpawnEntity(entity);
  };

  return (
    <div className="flex flex-col gap-6 w-full z-10" id="julio-mod-panel-module">
      {/* WARNING / DEFIANT INTRO BANNER */}
      <div className="bg-gradient-to-r from-red-950/60 via-red-900/20 to-zinc-950 border-2 border-red-500/80 rounded-lg p-5 flex flex-col md:flex-row items-center justify-between gap-4 font-mono animate-[pulse_2.5s_infinite]">
        <div className="flex items-center gap-4.5">
          <ShieldAlert className="w-10 h-10 text-red-500 shrink-0" />
          <div className="flex flex-col">
            <span className="text-[10px] text-red-400 font-extrabold tracking-widest leading-none">
              ★ SUBSISTEMA MOD MAESTRO ACTIVADO : INOCULACIÓN DE CONTROL ★
            </span>
            <h4 className="text-base font-black text-white mt-1 uppercase">
              MENÚ DE DESARROLLO - PROTOCOLO JULIO
            </h4>
            <p className="text-[10px] text-zinc-405 max-w-xl mt-1 leading-normal">
              Bypass total de seguridad detectado. Se ha otorgado acceso irrestricto de compilación a la red de datos local. Altera transacciones o inyecta elementos directamente en las bobinas.
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* LEFT COLUMN: CURRENCY AND STATS HYBRID TUNER */}
        <div className="lg:col-span-1 flex flex-col gap-5 bg-zinc-950/40 border-2 border-red-900/60 p-4 rounded-lg font-mono">
          <h3 className="text-xs font-bold uppercase tracking-wider text-red-500 flex items-center gap-1.5 border-b border-zinc-900 pb-2">
            <Cpu className="w-4 h-4 text-red-500" />
            Control Cuántico de Variables
          </h3>

          {/* MONEY MOD */}
          <div className="flex flex-col gap-3 pb-4 border-b border-zinc-900">
            <div className="flex items-center justify-between text-[10px]">
              <span className="text-zinc-400 uppercase">Ajustar Monedas</span>
              <span className="text-amber-500 font-bold flex items-center gap-1">
                <Coins className="w-3.5 h-3.5" /> {stats.coins.toLocaleString()}
              </span>
            </div>
            <form onSubmit={handleSetCoins} className="flex gap-2">
              <input
                type="number"
                min="0"
                value={customCoins}
                onChange={(e) => setCustomCoins(e.target.value)}
                className="flex-1 bg-black border border-red-900/40 hover:border-red-700/60 rounded px-2.5 py-1.5 text-xs font-bold text-red-400 focus:outline-none focus:border-red-500 text-center"
              />
              <button 
                type="submit"
                className="px-3 border border-red-500 bg-red-950/20 text-red-400 hover:text-white font-extrabold text-[10px] rounded cursor-pointer transition-colors"
              >
                APLICAR
              </button>
            </form>
            <div className="grid grid-cols-3 gap-1.5 mt-1">
              <button
                onClick={() => handleQuickAddCoins(1000)}
                className="py-1 rounded bg-red-950/15 border border-zinc-900 text-zinc-350 hover:bg-red-950/40 hover:text-red-400 text-[9px] font-bold cursor-pointer transition-colors"
              >
                +1K
              </button>
              <button
                onClick={() => handleQuickAddCoins(10000)}
                className="py-1 rounded bg-red-950/15 border border-zinc-900 text-zinc-350 hover:bg-red-950/40 hover:text-red-400 text-[9px] font-bold cursor-pointer transition-colors"
              >
                +10K
              </button>
              <button
                onClick={() => handleQuickAddCoins(100000)}
                className="py-1 rounded bg-red-950/15 border border-zinc-900 text-zinc-350 hover:bg-red-950/40 hover:text-red-400 text-[9px] font-bold cursor-pointer transition-colors"
              >
                +100K
              </button>
            </div>
          </div>

          {/* LUCK LUCK TUNER */}
          <div className="flex flex-col gap-3 pb-4 border-b border-zinc-900">
            <div className="flex items-center justify-between text-[10px]">
              <span className="text-zinc-400 uppercase">Factor de Suerte</span>
              <span className="text-red-400 font-bold flex items-center gap-1">
                <Sparkles className="w-3.5 h-3.5" /> {stats.luckMultiplier.toFixed(2)}x
              </span>
            </div>
            <form onSubmit={handleSetLuck} className="flex gap-2">
              <input
                type="text"
                value={customLuck}
                onChange={(e) => setCustomSuerte(e.target.value)}
                className="flex-1 bg-black border border-red-900/40 hover:border-red-700/60 rounded px-2.5 py-1.5 text-xs font-bold text-red-400 focus:outline-none focus:border-red-500 text-center"
              />
              <button 
                type="submit"
                className="px-3 border border-red-500 bg-red-950/20 text-red-400 hover:text-white font-extrabold text-[10px] rounded cursor-pointer transition-colors"
              >
                FIJAR
              </button>
            </form>
            <div className="grid grid-cols-4 gap-1.5 mt-1">
              <button
                onClick={() => handleQuickSetLuck(1.0)}
                className="py-1 rounded bg-zinc-900 border border-zinc-950 text-zinc-500 hover:text-zinc-300 text-[9px] font-bold cursor-pointer transition-colors"
              >
                RESET
              </button>
              <button
                onClick={() => handleQuickSetLuck(2.0)}
                className="py-1 rounded bg-red-950/10 border border-zinc-900 text-zinc-350 hover:bg-red-950/30 hover:text-red-400 text-[9px] font-bold cursor-pointer transition-colors"
              >
                2x
              </button>
              <button
                onClick={() => handleQuickSetLuck(5.0)}
                className="py-1 rounded bg-red-950/15 border border-zinc-800 text-zinc-350 hover:bg-red-950/40 hover:text-red-400 text-[9px] font-bold cursor-pointer transition-colors"
              >
                5x
              </button>
              <button
                onClick={() => handleQuickSetLuck(50.0)}
                className="py-1 rounded bg-red-950/25 border border-red-900/30 text-red-400 hover:bg-red-950/55 hover:text-red-300 text-[9px] font-extrabold cursor-pointer transition-colors"
              >
                50x
              </button>
            </div>
          </div>

          {/* QUICK FULL TRICK HANDLERS */}
          <div className="flex flex-col gap-2">
            <span className="text-[9px] text-zinc-500 uppercase font-semibold">Inyecciones Rápidas del Servidor</span>
            <button
              onClick={handleMaxUpgrades}
              className="py-2 rounded border border-yellow-600 bg-yellow-950/10 hover:bg-yellow-950/30 text-yellow-400 hover:text-white font-extrabold text-[10px] flex items-center justify-center gap-1.5 cursor-pointer transition-colors"
            >
              <Zap className="w-3.5 h-3.5" />
              MAXIMIZAR HARDWARE (FULL UPGRADES)
            </button>
            <button
              onClick={handleUnlockThemes}
              className="py-2 rounded border border-emerald-600 bg-emerald-950/10 hover:bg-emerald-950/30 text-emerald-400 hover:text-white font-extrabold text-[10px] flex items-center justify-center gap-1.5 cursor-pointer transition-colors"
            >
              <Palette className="w-3.5 h-3.5" />
              DESBLOQUEAR TODOS LOS TEMAS
            </button>
          </div>
        </div>

        {/* RIGHT COLUMN (SPANS 2 COLUMNS): ALL ITEMS INJECTOR DEVICE */}
        <div className="lg:col-span-2 flex flex-col gap-4 bg-zinc-950/30 border border-zinc-900 rounded-lg p-4 font-mono">
          <h3 className="text-xs font-bold uppercase tracking-wider text-emerald-400 flex items-center gap-1.5 border-b border-zinc-900 pb-2">
            <Hammer className="w-4 h-4 text-emerald-400" />
            Inyector de Coordenadas de Datos (Spawner de Objetos)
          </h3>

          {/* SEARCH FILTERS */}
          <div className="flex flex-col md:flex-row gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-zinc-500" />
              <input
                type="text"
                placeholder="Filtrar por nombre o descripción..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9 pr-4 py-2 w-full bg-zinc-950 border border-zinc-850 rounded text-xs text-zinc-300 focus:outline-none focus:border-red-500/80 placeholder-zinc-700"
              />
            </div>
            
            <select
              value={rarityFilter}
              onChange={(e) => setRarityFilter(e.target.value)}
              className="bg-black border border-zinc-850 rounded px-3 py-2 text-xs text-zinc-350 focus:outline-none focus:border-red-500"
            >
              <option value="all">TODOS LOS RANGOS</option>
              {Object.keys(RARITIES).map((rarityKey) => (
                <option key={rarityKey} value={rarityKey}>
                  {RARITIES[rarityKey as RarityType]?.label || rarityKey.toUpperCase()}
                </option>
              ))}
            </select>
          </div>

          {/* CARDS VIEWER SCROLL CONTAINER */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[360px] overflow-y-auto pr-1">
            {filteredEntities.map((entity) => {
              const rarityConfig = RARITIES[entity.rarity];
              return (
                <div 
                  key={entity.id} 
                  className="bg-zinc-950 border border-zinc-9d0 rounded p-3 flex flex-col justify-between items-stretch hover:border-red-500/50 transition-all gap-3.5 shadow-sm group"
                >
                  <div className="flex items-start gap-2.5">
                    {/* Tiny ASCII block view */}
                    <div className="bg-black border border-zinc-900 p-1 rounded font-mono text-[6px] leading-[1.3] text-zinc-450 select-none shrink-0 text-center w-10.5 h-10.5 flex flex-col justify-center items-center overflow-hidden">
                      <pre className="m-0 leading-none">{entity.ascii}</pre>
                    </div>

                    <div className="flex flex-col min-w-0">
                      <span className="text-[11.5px] font-bold text-zinc-200 truncate pr-1">
                        {entity.name}
                      </span>
                      <span 
                        className="text-[8.5px] uppercase font-bold tracking-widest mt-0.5" 
                        style={{ color: rarityConfig.textColor }}
                      >
                        {rarityConfig.label}
                      </span>
                    </div>
                  </div>

                  <p className="text-[9.5px] text-zinc-500 leading-normal line-clamp-2">
                    {entity.description}
                  </p>

                  <div className="flex justify-between items-center mt-auto pt-2 border-t border-zinc-900">
                    <span className="text-[8.5px] text-zinc-650">REF: {entity.id}</span>
                    <button
                      onClick={() => handleSpawn(entity)}
                      className="px-2.5 py-1.5 border border-red-500 bg-red-950/10 text-red-500 hover:bg-red-500/10 hover:text-white rounded text-[10px] font-black uppercase flex items-center gap-1.5 cursor-pointer active:scale-95 transition-all"
                    >
                      <Plus className="w-3.5 h-3.5" />
                      SPAWN
                    </button>
                  </div>
                </div>
              );
            })}
            {filteredEntities.length === 0 && (
              <div className="col-span-full py-16 text-center text-zinc-600 text-xs">
                No se encontraron coordenadas coincidiendo con los filtros.
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};