{% extends "base.html" %}
{% block title %}Solve CAPTCHA — product-ui{% endblock %}
{% block content %}
<div class="row mb-3">
  <div class="col">
    <h4 class="mb-1">Anti-bot challenge</h4>
    <p class="text-muted small mb-2">Solve the CAPTCHA below, then wait — the product will be fetched automatically.</p>
    <span id="status-badge" class="badge bg-warning text-dark fs-6">Waiting for verification…</span>
  </div>
</div>

<div class="row">
  <div class="col-auto">
    <div id="frame-wrapper" style="position:relative;display:inline-block;cursor:crosshair;border:1px solid #dee2e6;border-radius:4px;overflow:hidden;">
      <img id="frame" src="" alt="Browser view" style="display:block;max-width:100%;height:auto;" />
    </div>
  </div>
</div>

<script>
const SESSION_ID = {{ session_id | tojson }};
const PRODUCT_URL = {{ product_url | tojson }};

const frame = document.getElementById('frame');
const badge = document.getElementById('status-badge');

let solved = false;
let frameInterval, statusInterval;

// --- Screenshot polling ---
function refreshFrame() {
  if (solved) return;
  frame.src = `/challenge/${SESSION_ID}/frame?t=${Date.now()}`;
}
frameInterval = setInterval(refreshFrame, 500);
refreshFrame();

// --- Mouse forwarding ---
frame.addEventListener('click', async (e) => {
  const rect = frame.getBoundingClientRect();
  const naturalW = frame.naturalWidth || rect.width;
  const naturalH = frame.naturalHeight || rect.height;
  const scaleX = naturalW / rect.width;
  const scaleY = naturalH / rect.height;
  const x = (e.clientX - rect.left) * scaleX;
  const y = (e.clientY - rect.top) * scaleY;
  await fetch(`/challenge/${SESSION_ID}/mouse`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({type: 'click', x, y}),
  }).catch(() => {});
});

frame.addEventListener('mousemove', async (e) => {
  const rect = frame.getBoundingClientRect();
  const scaleX = (frame.naturalWidth || rect.width) / rect.width;
  const scaleY = (frame.naturalHeight || rect.height) / rect.height;
  const x = (e.clientX - rect.left) * scaleX;
  const y = (e.clientY - rect.top) * scaleY;
  await fetch(`/challenge/${SESSION_ID}/mouse`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({type: 'move', x, y}),
  }).catch(() => {});
});

// --- Status polling ---
async function checkStatus() {
  if (solved) return;
  try {
    const resp = await fetch(`/challenge/${SESSION_ID}/status?url=${encodeURIComponent(PRODUCT_URL)}`);
    if (!resp.ok) return;
    const data = await resp.json();
    if (data.status === 'solved' && data.redirect_url) {
      solved = true;
      clearInterval(frameInterval);
      clearInterval(statusInterval);
      badge.className = 'badge bg-success fs-6';
      badge.textContent = 'Verified! Redirecting…';
      window.location = data.redirect_url;
    } else if (data.status === 'expired') {
      solved = true;
      clearInterval(frameInterval);
      clearInterval(statusInterval);
      badge.className = 'badge bg-danger fs-6';
      badge.innerHTML = 'Session expired. <a href="/" class="text-white">Try again</a>';
    }
  } catch (_) {}
}
statusInterval = setInterval(checkStatus, 2000);
</script>
{% endblock %}