import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Play, Square, Pause, SkipForward, X, Terminal as TerminalIcon, Info, ChevronRight, Save, RefreshCw, LayoutGrid, Cpu } from 'lucide-react';

/**
 * CodeHarvest - Protótipo de Jogo de Programação
 * Single File React Component
 */

// --- ENGINE & INTERPRETER ---
// Um mini-interpretador para simular execução de Python de forma segura e controlada (step-by-step).
// Isso permite pausar loops infinitos e controlar a velocidade de execução sem travar o navegador.

const parseLine = (line) => {
  const clean = line.trim();
  if (!clean || clean.startsWith('#')) return { type: 'noop' };
  
  // Detecção de comandos básicos
  if (clean.startsWith('harvest()')) return { type: 'call', func: 'harvest' };
  if (clean.startsWith('get_resources()')) return { type: 'call', func: 'get_resources' };
  if (clean.match(/^sleep\(\s*(\d+(\.\d+)?)\s*\)/)) {
    const args = clean.match(/^sleep\(\s*(\d+(\.\d+)?)\s*\)/);
    return { type: 'call', func: 'sleep', args: [parseFloat(args[1])] };
  }
  if (clean.match(/^log\((.*)\)/)) {
    const args = clean.match(/^log\((.*)\)/);
    return { type: 'call', func: 'log', args: [args[1].replace(/['"]/g, '')] };
  }
  if (clean.match(/^build_block\(\s*(-?\d+)\s*,\s*(-?\d+)\s*\)/)) {
    const args = clean.match(/^build_block\(\s*(-?\d+)\s*,\s*(-?\d+)\s*\)/);
    return { type: 'call', func: 'build_block', args: [parseInt(args[1]), parseInt(args[2])] };
  }
  
  // Controle de Fluxo Simplificado (Python-like)
  if (clean.startsWith('while True:')) return { type: 'loop_start', condition: 'true' };
  if (clean.match(/^for\s+(\w+)\s+in\s+range\((\d+)\):/)) {
    const match = clean.match(/^for\s+(\w+)\s+in\s+range\((\d+)\):/);
    return { type: 'loop_fixed_start', var: match[1], count: parseInt(match[2]) };
  }
  
  // Atribuição de variáveis simples (ex: x = 10)
  if (clean.match(/^(\w+)\s*=\s*(\d+)$/)) {
    const match = clean.match(/^(\w+)\s*=\s*(\d+)$/);
    return { type: 'assign', var: match[1], val: parseInt(match[2]) };
  }

  // Condicionais simples (if coins > 10:)
  if (clean.match(/^if\s+(\w+)\s*(>|<|==|>=|<=)\s*(\d+):/)) {
    const match = clean.match(/^if\s+(\w+)\s*(>|<|==|>=|<=)\s*(\d+):/);
    return { type: 'if_start', var: match[1], op: match[2], val: parseInt(match[3]) };
  }

  return { type: 'unknown', text: clean };
};

// --- GAME CONSTANTS & DATA ---

const LEVEL_CAPS = [0, 100, 300, 600, 1000, 2000];
const BUILD_COST = 50;
const TUTORIAL_STEPS = [
  { 
    id: 1, 
    title: "Olá, Programador!", 
    text: "Bem-vindo ao CodeHarvest. Sua tarefa é automatizar a coleta de recursos. Para começar, digite `harvest()` no terminal e clique em Run.",
    check: (logs) => logs.some(l => l.includes("Colheu")) 
  },
  { 
    id: 2, 
    title: "O Poder dos Loops", 
    text: "Colher manualmente é chato. Vamos automatizar! Use um loop com sleep para colher continuamente sem travar o sistema.\n\nExemplo:\nwhile True:\n  harvest()\n  sleep(1)",
    check: (logs) => logs.filter(l => l.includes("Colheu")).length >= 3
  },
  { 
    id: 3, 
    title: "Construindo Impérios", 
    text: "Você precisa de mais terras. Use `build_block(x, y)` para expandir sua ilha. Cada bloco custa 50 moedas. Tente construir em (1, 0) quando tiver dinheiro.",
    check: (grid) => Object.keys(grid).length > 1
  }
];

const PRESET_SCRIPTS = {
  basic: "# Coleta básica\nharvest()\nlog('Trabalho feito!')",
  loop: "# Automação segura\nwhile True:\n  harvest()\n  log('Descansando...')\n  sleep(2)",
  builder: "# Construtor Inteligente\nwhile True:\n  harvest()\n  sleep(1)\n  # Se tiver moedas suficientes, construa\n  if coins >= 50:\n    build_block(1, 0)\n    log('Nova terra conquistada!')"
};

// --- MAIN COMPONENT ---

export default function CodeHarvest() {
  // Game State
  const [resources, setResources] = useState(0);
  const [coins, setCoins] = useState(0);
  const [xp, setXp] = useState(0);
  const [level, setLevel] = useState(1);
  const [grid, setGrid] = useState({ '0,0': { type: 'grass', level: 1 } });
  
  // Terminal State
  const [code, setCode] = useState(PRESET_SCRIPTS.basic);
  const [logs, setLogs] = useState([]);
  const [isRunning, setIsRunning] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  const [currentLine, setCurrentLine] = useState(-1);
  const [terminalPos, setTerminalPos] = useState({ x: 20, y: 100 });
  const [terminalSize, setTerminalSize] = useState({ w: 400, h: 320 });
  
  // Execution Context (Refs para acesso mutável durante o loop do game)
  const executionRef = useRef({
    lines: [],
    pointer: 0,
    stack: [], // Para loops
    vars: {},
    waitUntil: 0,
    harvestCount: 0,
    lastTick: Date.now(),
    maxTime: 0
  });

  const [tutorialStep, setTutorialStep] = useState(0);
  const [showTutorial, setShowTutorial] = useState(true);

  // --- GAME LOGIC ---

  const logMsg = (msg, type = 'info') => {
    setLogs(prev => [...prev.slice(-49), `[${new Date().toLocaleTimeString()}] ${msg}`]);
  };

  const addXp = (amount) => {
    setXp(prev => {
      const newXp = prev + amount;
      if (newXp >= LEVEL_CAPS[level]) {
        setLevel(l => l + 1);
        logMsg(`SUBIU DE NÍVEL! Nível ${level + 1} alcançado!`, 'success');
      }
      return newXp;
    });
  };

  const sandboxApi = {
    harvest: () => {
      // Verifica quotas
      const now = Date.now();
      if (executionRef.current.harvestCount > 2) { // Max 2 por segundo (se ignorar sleep)
         // Penalidade leve, apenas falha
         logMsg("ERRO: Coleta muito rápida! Use sleep().", 'error');
         return false;
      }
      
      const amount = Math.floor(Math.random() * 5) + 1;
      setResources(r => r + amount);
      setCoins(c => c + amount); // Conversão automática simples para MVP
      addXp(10);
      logMsg(`Colheu ${amount} recursos (+${amount} moedas)`);
      
      // Efeito visual (simulado via log por enquanto)
      executionRef.current.harvestCount++;
      return true;
    },
    sleep: (seconds) => {
      executionRef.current.waitUntil = Date.now() + (seconds * 1000);
    },
    log: (msg) => {
      logMsg(msg);
    },
    build_block: (x, y) => {
      const key = `${x},${y}`;
      if (grid[key]) {
        logMsg(`Já existe um bloco em ${x},${y}`, 'warn');
        return;
      }
      setCoins(currentCoins => {
        if (currentCoins >= BUILD_COST) {
          setGrid(prev => ({ ...prev, [key]: { type: 'grass', level: 1 } }));
          logMsg(`Construiu novo bloco em ${x},${y}`, 'success');
          return currentCoins - BUILD_COST;
        } else {
          logMsg(`Moedas insuficientes (${currentCoins}/${BUILD_COST})`, 'error');
          return currentCoins;
        }
      });
    }
  };

  // --- INTERPRETER ENGINE ---

  const startScript = () => {
    if (code.trim() === '') return;
    
    executionRef.current = {
      lines: code.split('\n'),
      pointer: 0,
      stack: [],
      vars: {},
      waitUntil: 0,
      harvestCount: 0,
      lastTick: Date.now(),
      maxTime: Date.now() + (5 * 60 * 1000) // 5 min max run
    };
    
    setIsRunning(true);
    setIsPaused(false);
    setLogs([]);
    logMsg("Script iniciado...");
  };

  const stopScript = () => {
    setIsRunning(false);
    setCurrentLine(-1);
    logMsg("Script parado.");
  };

  const stepScript = useCallback(() => {
    if (!isRunning || isPaused) return;

    const ctx = executionRef.current;
    const now = Date.now();

    // Verifica Timeout Global
    if (now > ctx.maxTime) {
      logMsg("Tempo limite de execução excedido (5 min).", 'error');
      stopScript();
      return;
    }

    // Verifica Sleep
    if (now < ctx.waitUntil) return;

    // Reset harvest quota a cada segundo
    if (now - ctx.lastTick > 1000) {
      ctx.harvestCount = 0;
      ctx.lastTick = now;
    }

    if (ctx.pointer >= ctx.lines.length) {
      stopScript();
      return;
    }

    const lineRaw = ctx.lines[ctx.pointer];
    setCurrentLine(ctx.pointer);
    const instruction = parseLine(lineRaw);

    // Lógica de indentação simplificada:
    // Se a linha atual tem indentação menor que o topo da stack, significa que saímos do bloco
    const currentIndent = lineRaw.search(/\S|$/);
    
    // Processamento de loops (verificação de fim de bloco)
    if (ctx.stack.length > 0) {
      const activeLoop = ctx.stack[ctx.stack.length - 1];
      // Se a indentação da linha atual for menor ou igual à do inicio do loop, e não é a linha do loop em si
      if (currentIndent <= activeLoop.indent && ctx.pointer > activeLoop.startLine && lineRaw.trim() !== '') {
         // Fim do bloco do loop. Volta pro inicio.
         ctx.pointer = activeLoop.startLine;
         return; // Pula execução desta linha para reavaliar a condição do loop
      }
    }

    // Executa instrução
    switch (instruction.type) {
      case 'call':
        if (sandboxApi[instruction.func]) {
          sandboxApi[instruction.func](...instruction.args || []);
        }
        break;
      
      case 'loop_start': // while True
        ctx.stack.push({ type: 'while', startLine: ctx.pointer, indent: currentIndent });
        break;

      case 'loop_fixed_start': // for i in range
        // Verifica se já iniciamos este loop
        const existingLoop = ctx.stack.find(l => l.startLine === ctx.pointer);
        if (existingLoop) {
           existingLoop.iter++;
           if (existingLoop.iter >= existingLoop.max) {
             // Loop acabou, remove da stack e avança até encontrar indentação menor
             ctx.stack.pop();
             // Avançar ponteiro até sair do bloco (simplificado: deixa o parser normal lidar)
             // Um parser real pularia linhas aqui. Neste simples, ele vai executar e falhar a indentação
             // Hack rápido: setar flag para pular execução até indentação voltar
           } else {
             ctx.vars[instruction.var] = existingLoop.iter;
           }
        } else {
           ctx.stack.push({ 
             type: 'for', 
             startLine: ctx.pointer, 
             indent: currentIndent, 
             var: instruction.var, 
             max: instruction.count, 
             iter: 0 
           });
           ctx.vars[instruction.var] = 0;
        }
        break;
        
      case 'if_start':
        // Avaliação muito simples de condicionais
        let val1 = ctx.vars[instruction.var];
        if (instruction.var === 'coins') val1 = coins; // Hack para acessar state atual, idealmente passaria no contexto
        if (instruction.var === 'resources') val1 = resources;

        const val2 = instruction.val;
        let result = false;
        if (instruction.op === '>') result = val1 > val2;
        if (instruction.op === '>=') result = val1 >= val2;
        if (instruction.op === '<') result = val1 < val2;
        if (instruction.op === '<=') result = val1 <= val2;
        if (instruction.op === '==') result = val1 == val2;
        
        if (!result) {
          // Se falso, precisamos pular o bloco
          // Neste interpretador simples, vamos marcar para pular a próxima linha se ela for indentada
          // Isso é uma limitação do protótipo, mas funciona para ifs simples de 1 linha
          ctx.skipBlock = true;
          ctx.skipIndent = currentIndent;
        }
        break;
      
      case 'noop':
      case 'unknown':
        break;
    }

    // Avança linha
    ctx.pointer++;
    
    // Se skipBlock estiver ativo (para IFs falsos)
    if (ctx.skipBlock && ctx.pointer < ctx.lines.length) {
       const nextIndent = ctx.lines[ctx.pointer].search(/\S|$/);
       if (nextIndent > ctx.skipIndent) {
         ctx.pointer++; // Pula
       } else {
         ctx.skipBlock = false;
       }
    }

  }, [isRunning, isPaused, coins, resources, grid]); // Deps do stepScript

  // Game Loop Ticker
  useEffect(() => {
    let interval;
    if (isRunning && !isPaused) {
      interval = setInterval(stepScript, 100); // 10 ticks por segundo (execução rápida)
    }
    return () => clearInterval(interval);
  }, [isRunning, isPaused, stepScript]);

  // Checagem de Tutorial
  useEffect(() => {
    if (showTutorial && tutorialStep < TUTORIAL_STEPS.length) {
      const currentTask = TUTORIAL_STEPS[tutorialStep];
      // Passa dados para checagem
      if (currentTask.check(logs, grid)) {
        logMsg(`TUTORIAL: ${currentTask.title} completado!`, 'success');
        setTutorialStep(s => s + 1);
      }
    }
  }, [logs, grid, tutorialStep, showTutorial]);


  // --- UI HANDLERS ---
  
  // Draggable logic basic
  const startDrag = (e) => {
    if (e.target.closest('.no-drag')) return;
    const startX = e.clientX - terminalPos.x;
    const startY = e.clientY - terminalPos.y;
    
    const onMove = (mv) => {
      setTerminalPos({ x: mv.clientX - startX, y: mv.clientY - startY });
    };
    const onUp = () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  };

  return (
    <div className="w-full h-screen bg-slate-900 text-slate-100 overflow-hidden font-sans relative select-none">
      
      {/* BACKGROUND GRID */}
      <div className="absolute inset-0 opacity-20 pointer-events-none" 
           style={{ 
             backgroundImage: 'linear-gradient(#475569 1px, transparent 1px), linear-gradient(90deg, #475569 1px, transparent 1px)', 
             backgroundSize: '40px 40px' 
           }}>
      </div>

      {/* GAME WORLD (ISOMETRIC VIEW) */}
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] pointer-events-none">
         <div className="relative w-full h-full" style={{ transform: 'rotateX(60deg) rotateZ(45deg) scale(0.8)' }}>
            {Object.entries(grid).map(([pos, block]) => {
              const [x, y] = pos.split(',').map(Number);
              // Isometric Grid Coordinates
              const left = x * 60;
              const top = y * 60;
              
              return (
                <div key={pos} 
                     className="absolute w-[50px] h-[50px] transition-all duration-500 ease-out"
                     style={{ 
                       left: `${left}px`, 
                       top: `${top}px`,
                       transform: `translateZ(${block.type === 'grass' ? 0 : 10}px)`
                     }}>
                    {/* Block CSS 3D Fake */}
                    <div className="w-full h-full bg-emerald-500 border-4 border-emerald-600 shadow-lg relative">
                       {/* Top Highlight */}
                       <div className="absolute inset-0 bg-white opacity-10"></div>
                       {/* Side Fake (Depth) */}
                       <div className="absolute -bottom-2 left-1 w-full h-2 bg-emerald-800 skew-x-[45deg] origin-bottom-left"></div>
                       <div className="absolute top-1 -right-2 w-2 h-full bg-emerald-700 skew-y-[45deg] origin-top-right"></div>
                       
                       {/* Resource Indicator */}
                       <div className="absolute -top-10 left-1/2 transform -translate-x-1/2 animate-bounce">
                          <div className="bg-yellow-400 w-2 h-2 rounded-full shadow-[0_0_10px_#fbbf24]"></div>
                       </div>
                    </div>
                </div>
              );
            })}
         </div>
      </div>

      {/* HUD HEADER */}
      <div className="absolute top-4 right-4 flex flex-col gap-3 items-end pointer-events-auto">
        <div className="bg-amber-500 text-slate-900 font-bold px-4 py-2 rounded-full shadow-lg flex items-center gap-2 border-2 border-amber-300">
          <div className="w-4 h-4 rounded-full border-2 border-slate-900"></div>
          {coins} Moedas
        </div>
        <div className="bg-orange-500 text-white font-bold px-4 py-2 rounded-full shadow-lg flex items-center gap-2 border-2 border-orange-300">
          <Cpu size={16} />
          {resources} Recursos
        </div>
        <div className="bg-purple-600 text-white font-bold px-4 py-2 rounded-full shadow-lg flex items-center gap-2 border-2 border-purple-400 w-48 relative overflow-hidden">
          <div className="z-10 relative flex items-center gap-2"><LayoutGrid size={16}/> Nível {level}</div>
          <div className="absolute left-0 top-0 h-full bg-purple-400 opacity-50" 
               style={{ width: `${(xp / LEVEL_CAPS[level]) * 100}%`, transition: 'width 0.5s' }}></div>
        </div>
      </div>

      {/* TERMINAL WINDOW */}
      <div 
        className="absolute bg-slate-800 rounded-lg shadow-2xl border border-slate-600 flex flex-col overflow-hidden"
        style={{ 
          left: terminalPos.x, 
          top: terminalPos.y, 
          width: terminalSize.w, 
          height: terminalSize.h 
        }}
      >
        {/* Terminal Bar */}
        <div 
          className="bg-slate-700 p-2 flex items-center justify-between cursor-move select-none"
          onMouseDown={startDrag}
        >
          <div className="flex items-center gap-2">
            <div className="flex gap-1.5 ml-1">
               <div className="w-3 h-3 rounded-full bg-red-500"></div>
               <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
               <div className="w-3 h-3 rounded-full bg-green-500"></div>
            </div>
            <span className="ml-3 text-xs font-mono text-slate-300 flex items-center gap-1">
              <TerminalIcon size={12}/> python_script.py
            </span>
          </div>
          <div className="flex gap-1 no-drag">
             <button onClick={() => setTerminalSize(s => ({...s, w: s.w === 400 ? 600 : 400, h: s.h === 320 ? 500 : 320}))} className="p-1 hover:bg-slate-600 rounded">
                <RefreshCw size={12}/>
             </button>
          </div>
        </div>

        {/* Toolbar */}
        <div className="bg-slate-900 border-b border-slate-700 p-2 flex gap-2 no-drag">
          {!isRunning ? (
            <button 
              onClick={startScript}
              className="bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded text-xs font-bold flex items-center gap-1 transition-colors"
            >
              <Play size={14} fill="currentColor" /> Run
            </button>
          ) : (
            <>
              <button 
                onClick={stopScript}
                className="bg-red-600 hover:bg-red-500 text-white px-3 py-1 rounded text-xs font-bold flex items-center gap-1 transition-colors"
              >
                <Square size={14} fill="currentColor" /> Stop
              </button>
              <button 
                onClick={() => setIsPaused(!isPaused)}
                className="bg-yellow-600 hover:bg-yellow-500 text-white px-3 py-1 rounded text-xs font-bold flex items-center gap-1 transition-colors"
              >
                {isPaused ? <Play size={14}/> : <Pause size={14} fill="currentColor" />} {isPaused ? "Resume" : "Pause"}
              </button>
              {isPaused && (
                <button 
                  onClick={stepScript}
                  className="bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded text-xs font-bold flex items-center gap-1 transition-colors"
                >
                  <ChevronRight size={14} /> Step
                </button>
              )}
            </>
          )}
          <div className="w-px bg-slate-700 mx-1"></div>
          <select 
            className="bg-slate-800 text-xs text-slate-400 border border-slate-700 rounded px-2 outline-none"
            onChange={(e) => setCode(PRESET_SCRIPTS[e.target.value])}
          >
            <option value="basic">Exemplo: Coleta</option>
            <option value="loop">Exemplo: Loop</option>
            <option value="builder">Exemplo: Construir</option>
          </select>
        </div>

        {/* Editor Area */}
        <div className="flex-1 flex flex-col min-h-0 bg-slate-900 relative no-drag group">
          <div className="flex-1 relative overflow-auto custom-scrollbar">
             {/* Line Numbers & Highlight */}
             <div className="absolute left-0 top-0 bottom-0 w-8 bg-slate-800 border-r border-slate-700 text-slate-500 text-xs text-right pr-2 pt-2 font-mono leading-5 select-none">
               {code.split('\n').map((_, i) => (
                 <div key={i} className={`${currentLine === i ? 'bg-yellow-900 text-yellow-100' : ''}`}>
                   {i + 1}
                 </div>
               ))}
             </div>
             
             {/* Textarea */}
             <textarea 
               className="absolute inset-0 pl-10 pt-2 bg-transparent text-slate-300 font-mono text-sm leading-5 resize-none outline-none p-2 w-full h-full whitespace-pre"
               value={code}
               onChange={(e) => setCode(e.target.value)}
               spellCheck="false"
               disabled={isRunning}
             />
          </div>
          
          {/* Console Log */}
          <div className="h-1/3 bg-black border-t border-slate-700 flex flex-col font-mono text-xs">
            <div className="bg-slate-800 px-2 py-1 text-slate-400 text-[10px] uppercase tracking-wider flex justify-between">
               <span>Console Output</span>
               <button onClick={() => setLogs([])} className="hover:text-white">Clear</button>
            </div>
            <div className="flex-1 overflow-auto p-2 text-slate-300 space-y-1">
              {logs.length === 0 && <span className="text-slate-600 italic">Aguardando execução...</span>}
              {logs.map((log, i) => (
                <div key={i} className={`${log.includes('ERRO') ? 'text-red-400' : log.includes('success') ? 'text-green-400' : ''}`}>
                  {log.includes(']') ? <span className="text-slate-600 mr-2">{log.split(']')[0]}]</span> : null}
                  {log.includes(']') ? log.split(']')[1] : log}
                </div>
              ))}
              <div ref={(el) => el?.scrollIntoView({ behavior: 'smooth' })}></div>
            </div>
          </div>
        </div>
      </div>

      {/* TUTORIAL CARD */}
      {showTutorial && tutorialStep < TUTORIAL_STEPS.length && (
        <div className="absolute bottom-8 left-8 w-80 bg-white text-slate-900 rounded-lg shadow-2xl border-l-4 border-blue-500 p-4 animate-slide-in-up">
           <div className="flex justify-between items-start mb-2">
              <h3 className="font-bold flex items-center gap-2 text-blue-600">
                <Info size={18}/> Tutorial ({tutorialStep + 1}/{TUTORIAL_STEPS.length})
              </h3>
              <button onClick={() => setShowTutorial(false)} className="text-slate-400 hover:text-red-500"><X size={16}/></button>
           </div>
           <h4 className="font-semibold mb-1">{TUTORIAL_STEPS[tutorialStep].title}</h4>
           <p className="text-sm text-slate-600 leading-relaxed whitespace-pre-line">
             {TUTORIAL_STEPS[tutorialStep].text}
           </p>
           {tutorialStep === 0 && (
              <div className="mt-3 bg-slate-100 p-2 rounded text-xs font-mono border border-slate-200">
                 Dica: Clique no botão "Run" verde.
              </div>
           )}
        </div>
      )}
      
      {/* Footer Info */}
      <div className="absolute bottom-2 right-2 text-slate-500 text-xs">
        CodeHarvest Prototype v0.1 • Python Sandbox Environment
      </div>

      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { bg: #1e293b; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }
      `}</style>
    </div>
  );
}