<!-- Para o ambiente de sandbox: -->
<script src="https://3ds-nx-js.stone.com.br/test/v2/3ds2.min.js"></script>

<!-- Para o ambiente de produção: -->
<script src="https://3ds-nx-js.stone.com.br/live/v2/3ds2.min.js"></script>

<div id="myApplication">
  <!-- Container invisível para o 3DS Method -->
  <div id="tdsMethodContainer" style="display: none;"></div>
  
  <!-- Container para o Challenge -->
  <div id="challengeContainer"></div>
  
  <!-- Botão para iniciar o processo de autenticação 3DS que será utilizado nos exemplos a seguir -->
  <button id="submitButton">Finalizar Compra</button>
</div>

// Exemplo em Node.js com a biblioteca axios
const axios = require('axios');

async function generateTDSToken(api, secretKey) {
  try {
    const response = await axios.get(`${api}/tds-token`, {
      headers: {
        'Authorization': 'Basic ' + Buffer.from(`${secretKey}:`).toString('base64'),
      },
    });
    
    return response.data.tds_token;
  } catch (error) {
    throw new Error(`Failed to generate token: ${error.response?.data?.message || error.message}`);
  }
}

// Exemplo em Node.js com a biblioteca Express.js

const TDS_API_URLS = {
  sandbox: 'https://3ds-sdx.stone.com.br/v2',
  production: 'https://3ds.stone.com.br/v2'
};

app.get('/tds-token', async (req, res) => {
  try {
    const environment = process.env.NODE_ENV === 'production' ? 'production' : 'sandbox';
    const api = TDS_API_URLS[environment];
    
    if (!api) {
      throw new Error(`Invalid environment: ${environment}`);
    }
    
    const token = await generateTDSToken(api, process.env.STONE_SECRET_KEY);
    res.json({ token });
  } catch (error) {
    console.error('Error generating 3DS token:', error.message);
    res.status(500).json({ error: 'Failed to generate token' });
  }
});

async function getToken() {
  const response = await fetch('/generate-3ds-token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    }
  });
  
  const data = await response.json();
  return data.token;
}

const orderData = {
  "payments": [
    {
      "payment_method": "credit_card",
      "credit_card": {
        "card": {
          "number": "3000100811112072", // Cartão de teste que gera challenge manual
          "holder_name": "JOAO SILVA",
          "exp_month": 12,
          "exp_year": 2028,
          "billing_address": {
            "country": "BR",
            "state": "SP",
            "city": "São Paulo",
            "zip_code": "01234567",
            "line_1": "123, Rua das Flores, Centro",
            "line_2": "Apartamento 45"
          }
        },
      },
      "amount": 20000
    }
  ],
  "customer": {
    "name": "João Silva",
    "email": "[email protected]",
    "code": "CUST-001",
    "document": "12345678901",
    "phones": {
      "home_phone": {
        "country_code": "55",
        "area_code": "11",
        "number": "987654321"
      },
      "mobile_phone": {
        "country_code": "55",
        "area_code": "11",
        "number": "123456789"
      }
    }
  },
  "items": [
    {
      "amount": 15000,
      "description": "Smartphone Samsung Galaxy",
      "quantity": 1,
      "code": "ITEM-001"
    },
    {
      "amount": 5000,
      "description": "Capa Protetora",
      "quantity": 2,
      "code": "ITEM-002"
    }
  ],
  "shipping": {
    "recipient_name": "João Silva",
    "address": {
      "country": "BR",
      "state": "SP",
      "city": "São Paulo",
      "zip_code": "01234567",
      "line_1": "123, Rua das Flores, Centro",
      "line_2": "Apartamento 45"
    }
  }
};

async function process3DS() {
  // Desabilita o botão para evitar duplo clique
  document.getElementById('submitButton').disabled = true;
  
  try {
    // 1. Obter o token do backend
    const token = await getToken();
    
    // 2. Referências dos containers
    const tdsMethodContainer = document.getElementById('tdsMethodContainer');
    const challengeContainer = document.getElementById('challengeContainer');
    
    // 3. Executar o fluxo 3DS
    const response = await window.TDS.init({
      token: token,
      tds_method_container_element: tdsMethodContainer,
      challenge_container_element: challengeContainer,
      use_default_challenge_iframe_style: true, // Usar estilo padrão
      challenge_window_size: '03' // Tamanho médio da janela
    }, orderData);
    
    // 4. Processar resposta
    console.log('3DS Response:', response);
    alert('Transação processada com sucesso!');
    
  } catch (error) {
    console.error('Erro no 3DS:', error);
    alert('Erro ao processar pagamento: ' + error.message);
  } finally {
    // Reabilitar o botão
    document.getElementById('submitButton').disabled = false;
  }
}

// Vincular ao botão
document.getElementById('submitButton').addEventListener('click', process3DS);

/* Estilo personalizado para o challenge iframe */
#challengeContainer iframe {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 500px;
  height: 600px;
  border: 2px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: white;
  z-index: 9999;
}

// Função para testar diferentes cenários
async function testScenario(cardNumber, description) {
  console.log(`🧪 Testando: ${description}`);
  
  const testOrder = {
    ...orderData,
    payments: [{
      ...orderData.payments[0],
      credit_card: {
        ...orderData.payments[0].credit_card,
        card: {
          ...orderData.payments[0].credit_card.card,
          number: cardNumber // Sobrescrever com cartão de teste
        }
      }
    }]
  };
  
  try {
    const token = await getToken();
    const response = await window.TDS.init({
      token,
      tds_method_container_element: document.getElementById('tdsMethodContainer'),
      challenge_container_element: document.getElementById('challengeContainer')
    }, testOrder);
    
    console.log(`✅ ${description} - Resultado:`, response);
  } catch (error) {
    console.log(`❌ ${description} - Erro:`, error.message);
  }
}

// Executar testes
async function runAllTests3DS22() {
  // Testes 3DS 2.2
  await testScenario('4000100511112003', 'Frictionless Success (3DS 2.2)');
  await testScenario('3000100811112072', 'Manual Challenge (3DS 2.2)');
  await testScenario('7000100911112070', 'Auto Challenge Success (3DS 2.2)');
}

// ❌ Erro comum
catch (error) {
  if (error.message.includes('Invalid JWT')) {
    console.error('Token inválido ou expirado');
    // Gerar um novo token
    const newToken = await getToken();
    // Tentar novamente
  }
}

// ✅ Validação correta
if (!token || typeof token !== 'string') {
  throw new Error('Token é obrigatório e deve ser uma string');
}

// ✅ Verificação dos containers
const tdsMethodContainer = document.getElementById('tdsMethodContainer');
const challengeContainer = document.getElementById('challengeContainer');

if (!tdsMethodContainer || !challengeContainer) {
  throw new Error('Containers do 3DS não encontrados no DOM');
}

async function robustProcess3DS() {
  const maxRetries = 3;
  let attempt = 0;
  
  while (attempt < maxRetries) {
    try {
      const token = await getToken();
      
      const response = await window.TDS.init({
        token,
        tds_method_container_element: document.getElementById('tdsMethodContainer'),
        challenge_container_element: document.getElementById('challengeContainer'),
        use_default_challenge_iframe_style: true,
        challenge_window_size: '03'
      }, orderData);
      
      return response; // Sucesso
      
    } catch (error) {
      attempt++;
      console.warn(`Tentativa ${attempt} falhou:`, error.message);
      
      if (attempt >= maxRetries) {
        throw new Error(`Falha após ${maxRetries} tentativas: ${error.message}`);
      }
      
      // Aguardar antes de tentar novamente
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
    }
  }
}

// Debug do container
const container = document.getElementById('challengeContainer');
console.log('Container exists:', !!container);
console.log('Container visible:', container && container.offsetHeight > 0);

// Testar com cartão que força challenge
const testCard = '3000100811111072'; // Manual challenge

// Gerar token just-in-time
async function justInTimeProcess() {
  // Preparar tudo primeiro
  const orderReady = validateOrder(orderData);
  const containersReady = validateContainers();
  
  if (orderReady && containersReady) {
    // Só então gerar o token
    const token = await getToken();
    return window.TDS.init(/* ... */);
  }
}

// Backend deve incluir headers CORS
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://seudominio.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});