import React, { useState, useMemo } from 'react';
import { Hash, Key, Lock, Unlock, Binary, Calculator, Eye, FileText } from 'lucide-react';

const BitcoinPuzzleSolver = () => {
  const [activePhase, setActivePhase] = useState('overview');
  const [inputText, setInputText] = useState('');
  const [hashResult, setHashResult] = useState('');
  const [decryptionKey, setDecryptionKey] = useState('');
  const [decryptionText, setDecryptionText] = useState('');

  // SHA256 hash function (simplified - in real implementation you'd use crypto library)
  const sha256Hash = async (text) => {
    const encoder = new TextEncoder();
    const data = encoder.encode(text);
    const hash = await crypto.subtle.digest('SHA-256', data);
    return Array.from(new Uint8Array(hash))
      .map(b => b.toString(16).padStart(2, '0'))
      .join('');
  };

  const handleHash = async () => {
    if (inputText) {
      const result = await sha256Hash(inputText);
      setHashResult(result);
    }
  };

  // Binary matrix from the puzzle
  const binaryMatrix = [
    [0,0,1,1,0,1,0,0,1,0,1,1,0,0],
    [1,1,1,1,0,0,1,1,1,0,1,0,1,1],
    [1,1,0,1,1,1,0,1,0,0,1,0,0,1],
    [0,1,1,0,1,0,0,0,0,1,1,1,0,1],
    [0,1,1,0,0,0,1,1,0,0,0,1,1,0],
    [1,0,0,1,1,0,0,0,1,0,0,0,1,1],
    [1,0,0,1,1,1,0,0,0,1,0,0,0,0],
    [1,1,1,0,0,0,0,0,0,0,1,0,0,0],
    [0,0,0,1,1,1,0,1,1,1,1,1,0,1],
    [1,1,1,1,1,1,0,0,1,1,0,0,0,1],
    [1,1,0,1,0,0,0,0,0,1,1,0,1,1],
    [1,1,1,1,0,0,1,0,1,0,1,1,0,0],
    [0,1,0,1,1,1,0,1,0,0,0,1,1,0],
    [0,1,1,0,1,1,0,1,1,0,1,0,1,1]
  ];

  // Read spiral counterclockwise
  const readSpiral = () => {
    const bits = [];
    const visited = Array(14).fill().map(() => Array(14).fill(false));
    let row = 0, col = 0;
    let direction = 0; // 0: right, 1: down, 2: left, 3: up
    
    for (let i = 0; i < 196; i++) {
      bits.push(binaryMatrix[row][col]);
      visited[row][col] = true;
      
      // Try to continue in current direction
      let nextRow = row, nextCol = col;
      if (direction === 0) nextCol++;
      else if (direction === 1) nextRow++;
      else if (direction === 2) nextCol--;
      else nextRow--;
      
      // Check if we need to turn
      if (nextRow < 0 || nextRow >= 14 || nextCol < 0 || nextCol >= 14 || visited[nextRow][nextCol]) {
        direction = (direction + 1) % 4;
        if (direction === 0) nextCol = col + 1;
        else if (direction === 1) nextRow = row + 1;
        else if (direction === 2) nextCol = col - 1;
        else nextRow = row - 1;
      }
      
      row = nextRow;
      col = nextCol;
    }
    
    return bits;
  };

  const spiralBits = useMemo(() => readSpiral(), []);
  
  const bitsToAscii = (bits) => {
    let result = '';
    for (let i = 0; i < bits.length; i += 8) {
      const byte = bits.slice(i, i + 8);
      if (byte.length === 8) {
        const charCode = parseInt(byte.join(''), 2);
        result += String.fromCharCode(charCode);
      }
    }
    return result;
  };

  const phases = {
    overview: {
      title: "Visão Geral do Puzzle",
      content: (
        <div className="space-y-4">
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
            <h3 className="font-bold text-yellow-800 mb-2">🎯 Objetivo</h3>
            <p className="text-yellow-700">Resolver um puzzle criptográfico complexo para obter a chave privada de um endereço Bitcoin com 2.5 BTC (originalmente 5 BTC).</p>
          </div>
          
          <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
            <h3 className="font-bold text-blue-800 mb-2">📍 Endereço do Prêmio</h3>
            <p className="font-mono text-sm text-blue-700">1GSMG1JC9wtdSwfwApgj2xcmJPAwx7prBe</p>
          </div>
          
          <div className="bg-green-50 p-4 rounded-lg border border-green-200">
            <h3 className="font-bold text-green-800 mb-2">🔄 Status Atual</h3>
            <p className="text-green-700">O puzzle está parcialmente resolvido pela comunidade até a Fase 3.2, mas as etapas finais ainda são um mistério.</p>
          </div>
          
          <div className="bg-red-50 p-4 rounded-lg border border-red-200">
            <h3 className="font-bold text-red-800 mb-2">⚠️ Complexidade</h3>
            <p className="text-red-700">Requer conhecimentos em: criptografia, matrizes binárias, cifras históricas, referências a filmes (Matrix), xadrez, e muito mais.</p>
          </div>
        </div>
      )
    },
    
    phase1: {
      title: "Fase 1: Matriz Binária",
      content: (
        <div className="space-y-4">
          <div className="bg-gray-100 p-4 rounded">
            <h3 className="font-bold mb-2">Matriz 14x14 (lida em espiral anti-horária)</h3>
            <div className="grid grid-cols-14 gap-1 mb-4">
              {binaryMatrix.map((row, i) => 
                row.map((bit, j) => (
                  <div key={`${i}-${j}`} 
                       className={`w-6 h-6 flex items-center justify-center text-xs font-mono ${
                         bit ? 'bg-blue-600 text-white' : 'bg-yellow-200 text-black'
                       }`}>
                    {bit}
                  </div>
                ))
              )}
            </div>
            
            <div className="mb-2">
              <h4 className="font-semibold">Resultado da leitura em espiral:</h4>
              <p className="font-mono text-sm break-all bg-white p-2 rounded border">
                {bitsToAscii(spiralBits)}
              </p>
              <p className="text-sm text-gray-600 mt-2">
                Isso nos leva para: <strong>gsmg.io/theseedisplanted</strong>
              </p>
            </div>
          </div>
        </div>
      )
    },
    
    phase2: {
      title: "Fase 2: The Warning",
      content: (
        <div className="space-y-4">
          <div className="bg-purple-50 p-4 rounded border border-purple-200">
            <h3 className="font-bold text-purple-800 mb-2">🎵 Referência Musical</h3>
            <p className="text-purple-700">As imagens se referem à música "The Warning" do Logic:</p>
            <ul className="list-disc list-inside text-sm text-purple-600 mt-2">
              <li><strong>WAR + NING</strong> = WARNING</li>
              <li><strong>LO + (crypto) GIC</strong> = LOGIC</li>
            </ul>
          </div>
          
          <div className="bg-blue-50 p-4 rounded border border-blue-200">
            <h3 className="font-bold text-blue-800 mb-2">🔐 Formulário Oculto</h3>
            <p className="text-blue-700">A página contém um formulário POST oculto que requer a senha:</p>
            <p className="font-mono bg-white p-2 rounded border text-sm">
              theflowerblossomsthroughwhatseemstobeaconcretesurface
            </p>
          </div>
        </div>
      )
    },
    
    phase3: {
      title: "Fase 3: Matrix Reloaded",
      content: (
        <div className="space-y-4">
          <div className="bg-green-50 p-4 rounded border border-green-200">
            <h3 className="font-bold text-green-800 mb-2">🎬 Referência ao Matrix</h3>
            <p className="text-green-700">URL extremamente longa que referencia uma fala do Merovingian.</p>
            <p className="text-sm text-green-600 italic mt-2">
              "Choice is an illusion created between those with power and those without"
            </p>
            <p className="font-mono bg-white p-2 rounded border text-sm mt-2">
              Senha: causality
            </p>
          </div>
          
          <div className="bg-yellow-50 p-4 rounded border border-yellow-200">
            <h3 className="font-bold text-yellow-800 mb-2">🔑 Chave de 7 Partes</h3>
            <p className="text-yellow-700">A próxima fase requer uma chave concatenada de 7 partes:</p>
            <ol className="list-decimal list-inside text-sm text-yellow-600 mt-2 space-y-1">
              <li><strong>causality</strong></li>
              <li><strong>Safenet</strong> (HSM reference)</li>
              <li><strong>Luna</strong> (HSM reference)</li>
              <li><strong>HSM</strong></li>
              <li><strong>11110</strong> (Executive Order JFK)</li>
              <li><strong>0x736B6E61...</strong> (Genesis block hex)</li>
              <li><strong>B5KR/1r5B/2R5/...</strong> (Chess position)</li>
            </ol>
          </div>
        </div>
      )
    },
    
    aesBlob: {
      title: "AES Blob - Fase Final",
      content: (
        <div className="space-y-6">
          <div className="bg-red-50 p-4 rounded border border-red-200">
            <h3 className="font-bold text-red-800 mb-3 flex items-center">
              <Lock className="w-5 h-5 mr-2" />
              Blob AES Não Decodificado
            </h3>
            <p className="text-red-700 mb-3">Este é provavelmente o blob final que contém a chave privada!</p>
            
            <div className="bg-white p-3 rounded border">
              <h4 className="font-semibold mb-2">Blob Base64:</h4>
              <textarea 
                className="w-full h-32 font-mono text-sm p-2 bg-gray-50 border rounded resize-none"
                value="U2FsdGVkX186tYU0hVJBXXUnBUO7C0+X4KUWnWkCvoZSxbRD3wNsGWVHefvdrd9zQvX0t8v3jPB4okpspxebRi6sE1BMl5HI8Rku+KejUqTvdWOX6nQjSpepXwGuN/jJ"
                readOnly
              />
            </div>
          </div>

          <div className="bg-yellow-50 p-4 rounded border border-yellow-200">
            <h3 className="font-bold text-yellow-800 mb-3">🔑 Possíveis Chaves para Testar</h3>
            <div className="space-y-3">
              <div className="bg-white p-3 rounded border">
                <h4 className="font-semibold text-sm">Baseadas nas fases anteriores:</h4>
                <ul className="list-disc list-inside text-sm text-gray-700 mt-2 space-y-1">
                  <li><span className="font-mono bg-gray-100 px-1">HASHTHETEXT</span> (dica do Decentraland)</li>
                  <li><span className="font-mono bg-gray-100 px-1">THEMATRIXHASYOU</span> (cifra Beaufort)</li>
                  <li>SHA256 de textos das fases anteriores</li>
                  <li>Combinações dos segmentos decodificados</li>
                </ul>
              </div>
              
              <div className="bg-white p-3 rounded border">
                <h4 className="font-semibold text-sm">Das dicas não resolvidas:</h4>
                <ul className="list-disc list-inside text-sm text-gray-700 mt-2 space-y-1">
                  <li>Resultado dos segmentos hex: <span className="font-mono bg-gray-100 px-1">ahdafaoheiecggchgicbbhcgbehcfco...</span></li>
                  <li>Combinação dos elementos "shabef" = SHA256</li>
                  <li>Dados do espectrograma do Decentraland</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="bg-blue-50 p-4 rounded border border-blue-200">
            <h3 className="font-bold text-blue-800 mb-3">🎯 Próximos Passos Críticos</h3>
            <ol className="list-decimal list-inside text-blue-700 space-y-2 text-sm">
              <li><strong>Decodificar completamente os segmentos separados por "z"</strong>
                <ul className="list-disc list-inside ml-4 mt-1 space-y-1">
                  <li>Segment 1: <span className="font-mono text-xs">ahdafaoheiecggchgicbbhcgbehcfcoabicfdhhcdbbcagbdaiobbgbeadedde</span></li>
                  <li>Segment 2: <span className="font-mono text-xs">cfobfdhgdobdgooidgcdaoofidh</span></li>
                </ul>
              </li>
              <li><strong>Investigar a dica do Decentraland</strong>
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Arquivo de áudio → separar canais → inverter → espectrograma</li>
                </ul>
              </li>
              <li><strong>Testar "HASHTHETEXT" como chave</strong>
                <ul className="list-disc list-inside ml-4 mt-1">
                  <li>Pode ser literal ou SHA256 de algum texto específico</li>
                </ul>
              </li>
            </ol>
          </div>

          <div className="bg-green-50 p-4 rounded border border-green-200">
            <h3 className="font-bold text-green-800 mb-3">💡 Análise do Padrão</h3>
            <p className="text-green-700 text-sm mb-2">Baseado nos padrões anteriores:</p>
            <ul className="list-disc list-inside text-green-600 text-sm space-y-1">
              <li>Todas as chaves AES anteriores foram SHA256 de frases específicas</li>
              <li>As frases sempre vieram de pistas dentro do próprio puzzle</li>
              <li>Este blob provavelmente contém a chave privada final ou instruções para obtê-la</li>
              <li>A frase "shabef" pode indicar que precisamos fazer SHA256 de algo específico</li>
            </ul>
          </div>
        </div>
      )
    },

    tools: {
      title: "Ferramentas de Apoio",
      content: (
        <div className="space-y-6">
          <div className="bg-white p-4 rounded border">
            <h3 className="font-bold mb-3 flex items-center">
              <Hash className="w-5 h-5 mr-2" />
              Calculadora SHA256
            </h3>
            <div className="space-y-2">
              <input
                type="text"
                value={inputText}
                onChange={(e) => setInputText(e.target.value)}
                placeholder="Digite o texto para hash..."
                className="w-full p-2 border rounded"
              />
              <button
                onClick={handleHash}
                className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
              >
                Calcular Hash
              </button>
              {hashResult && (
                <div className="mt-2">
                  <p className="font-semibold">Resultado SHA256:</p>
                  <p className="font-mono text-sm bg-gray-100 p-2 rounded break-all">
                    {hashResult}
                  </p>
                </div>
              )}
            </div>
          </div>
          
          <div className="bg-white p-4 rounded border">
            <h3 className="font-bold mb-3 flex items-center">
              <Binary className="w-5 h-5 mr-2" />
              Conversores
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h4 className="font-semibold">Binário → ASCII</h4>
                <p className="text-sm text-gray-600">Use para converter sequências binárias</p>
              </div>
              <div>
                <h4 className="font-semibold">Hex → ASCII</h4>
                <p className="text-sm text-gray-600">Para dados hexadecimais</p>
              </div>
            </div>
          </div>
        </div>
      )
    },
    
    analysis: {
      title: "Análise do Estado Atual",
      content: (
        <div className="space-y-4">
          <div className="bg-amber-50 p-4 rounded border border-amber-200">
            <h3 className="font-bold text-amber-800 mb-2">📊 Progresso Conhecido</h3>
            <ul className="list-disc list-inside text-amber-700 space-y-1 text-sm">
              <li>✅ Fase 1: Matriz binária decodificada</li>
              <li>✅ Fase 2: Referência musical resolvida</li>
              <li>✅ Fase 3.1: Citação do Matrix + chave de 7 partes</li>
              <li>✅ Fase 3.2: Texto decodificado com Beaufort</li>
              <li>❓ SalPhaseIon: Parcialmente resolvido</li>
              <li>❓ Cosmic Duality: Mistério</li>
            </ul>
          </div>
          
          <div className="bg-red-50 p-4 rounded border border-red-200">
            <h3 className="font-bold text-red-800 mb-2">🚧 Obstáculos Restantes</h3>
            <ul className="list-disc list-inside text-red-700 space-y-1 text-sm">
              <li>Múltiplas cifras e senhas ainda por descobrir</li>
              <li>Referências cruzadas complexas entre fases</li>
              <li>Possível necessidade de força bruta</li>
              <li>Chave privada final ainda oculta</li>
            </ul>
          </div>
          
          <div className="bg-blue-50 p-4 rounded border border-blue-200">
            <h3 className="font-bold text-blue-800 mb-2">💡 Próximos Passos Sugeridos</h3>
            <ol className="list-decimal list-inside text-blue-700 space-y-1 text-sm">
              <li>Focar na decodificação completa da SalPhaseIon</li>
              <li>Investigar as dicas do Decentraland (áudio + espectrograma)</li>
              <li>Analisar os segmentos com separadores "z"</li>
              <li>Testar diferentes combinações de cifras</li>
            </ol>
          </div>
        </div>
      )
    }
  };

  return (
    <div className="max-w-6xl mx-auto p-6 bg-gray-50 min-h-screen">
      <div className="bg-white rounded-lg shadow-lg overflow-hidden">
        <div className="bg-gradient-to-r from-orange-600 to-red-600 text-white p-6">
          <h1 className="text-3xl font-bold flex items-center">
            <Key className="w-8 h-8 mr-3" />
            GSMG.IO 5 BTC Puzzle Solver
          </h1>
          <p className="text-orange-100 mt-2">Ferramenta colaborativa para resolver o puzzle Bitcoin</p>
        </div>
        
        <div className="flex">
          <nav className="w-64 bg-gray-100 p-4">
            <ul className="space-y-2">
              {Object.entries(phases).map(([key, phase]) => (
                <li key={key}>
                  <button
                    onClick={() => setActivePhase(key)}
                    className={`w-full text-left px-3 py-2 rounded transition-colors ${
                      activePhase === key 
                        ? 'bg-blue-600 text-white' 
                        : 'hover:bg-gray-200'
                    }`}
                  >
                    {phase.title}
                  </button>
                </li>
              ))}
            </ul>
          </nav>
          
          <main className="flex-1 p-6">
            <h2 className="text-2xl font-bold mb-4">
              {phases[activePhase].title}
            </h2>
            {phases[activePhase].content}
          </main>
        </div>
      </div>
    </div>
  );
};

export default BitcoinPuzzleSolver;