script.js

const output = document.getElementById('output');
const statusPill = document.getElementById('statusPill');
const apiBaseInput = document.getElementById('apiBase');
const apiBasePreview = document.getElementById('apiBasePreview');

function baseUrl() {
  return apiBaseInput.value.trim().replace(/\/$/, '');
}

function apiHeaders() {
  const headers = { 'Content-Type': 'application/json' };
  const key = document.getElementById('apiKey').value.trim();
  if (key) headers['X-API-Key'] = key;
  return headers;
}

function setStatus(text, kind = '') {
  statusPill.textContent = text;
  statusPill.className = 'status-pill';
  if (kind === 'ok') statusPill.classList.add('status-pill--ok');
  if (kind === 'error') statusPill.classList.add('status-pill--error');
}

function render(data) {
  output.textContent = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
}

async function request(path, options = {}) {
  const url = `${baseUrl()}${path}`;
  render(`Requesting ${url} ...`);
  setStatus('Loading');

  try {
    const response = await fetch(url, {
      ...options,
      headers: {
        ...apiHeaders(),
        ...(options.headers || {}),
      },
    });

    const text = await response.text();
    let parsed;

    try {
      parsed = text ? JSON.parse(text) : {};
    } catch {
      parsed = { raw: text };
    }

    const fullPayload = {
      url,
      method: options.method || 'GET',
      status: response.status,
      ok: response.ok,
      data: parsed,
    };

    render(fullPayload);
    setStatus(response.ok ? 'Success' : `Error ${response.status}`, response.ok ? 'ok' : 'error');
  } catch (error) {
    render({
      url,
      error: error.message,
      note: 'If this is a CORS error, allow your GitHub Pages domain in the backend or add CORSMiddleware in FastAPI.',
    });
    setStatus('Request failed', 'error');
  }
}

document.getElementById('healthBtn').addEventListener('click', () => {
  request('/healthz');
});

document.getElementById('oddsBtn').addEventListener('click', () => {
  const sport = document.getElementById('sport').value;
  const windowMinutes = document.getElementById('windowMinutes').value || '240';
  const books = document.getElementById('books').value.trim();

  const params = new URLSearchParams({
    sport,
    window_minutes: windowMinutes,
  });

  if (books) params.set('books', books);

  request(`/odds?${params.toString()}`);
});

document.getElementById('parlaysBtn').addEventListener('click', () => {
  request('/ev_parlays', {
    method: 'POST',
    body: JSON.stringify({}),
  });
});

document.getElementById('logBtn').addEventListener('click', () => {
  request('/log_result', {
    method: 'POST',
    body: JSON.stringify({ source: 'github-pages-demo', timestamp: new Date().toISOString() }),
  });
});

document.getElementById('clearOutputBtn').addEventListener('click', () => {
  render('Ready.');
  setStatus('Idle');
});

apiBaseInput.addEventListener('input', () => {
  apiBasePreview.textContent = baseUrl() || 'Set your backend URL';
});

render('Ready.');
setStatus('Idle');