tablet-checkin/backend/extension-src/popup/popup.js

import { isNewBookLoggedIn } from '../newbook-auth.js';

// Same regex as background.js — re-derived independently here from the live
// tab URL each time the popup opens (rather than trusting chrome.storage
// left over from the background script) so a stale badge state can never
// show a booking that isn't actually the one currently open. Confirmed
// 2026-09-01 by the user directly (real NewBook page URLs).
const BOOKING_URL_RE = /\/bookings_(?:view|edit|checkin)\/(\d+)/i;

const contentEl = document.getElementById('content');
const nbStatusEl = document.getElementById('nbStatus');

async function main() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const bookingMatch = tab?.url?.match(BOOKING_URL_RE);
  const bookingId = bookingMatch ? bookingMatch[1] : null;

  isNewBookLoggedIn().then(ok => {
    nbStatusEl.textContent = ok ? 'NewBook: signed in' : 'NewBook: not detected';
    nbStatusEl.className = `nb-status ${ok ? 'ok' : 'no'}`;
  });

  const { baseUrl, apiKey } = await chrome.storage.local.get(['baseUrl', 'apiKey']);
  if (!baseUrl || !apiKey) {
    contentEl.innerHTML = `
      <p class="muted">Not set up yet — add the tablet-checkin URL and a terminal API key first.</p>
      <a class="settings-link" href="#" id="openSettings">Open Settings</a>
    `;
    document.getElementById('openSettings').addEventListener('click', e => {
      e.preventDefault();
      chrome.runtime.openOptionsPage();
    });
    return;
  }

  if (!bookingId) {
    contentEl.innerHTML = `<p class="muted">Open a booking in NewBook to send it to a check-in tablet.</p>`;
    return;
  }

  contentEl.innerHTML = `
    <p class="booking">Booking <strong>#${bookingId}</strong></p>
    <select id="device"><option>Loading tablets…</option></select>
    <button class="primary" id="send" disabled>Send to Check-In Tablet</button>
    <div id="msg"></div>
  `;

  const deviceSelect = document.getElementById('device');
  const sendBtn = document.getElementById('send');
  const msgEl = document.getElementById('msg');

  let devices = [];
  try {
    const res = await fetch(`${baseUrl}/api/staff/devices`, {
      headers: { Authorization: `Bearer ${apiKey}` },
    });
    if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `HTTP ${res.status}`);
    devices = await res.json();
  } catch (err) {
    deviceSelect.innerHTML = '<option>Could not load tablets</option>';
    setMsg(msgEl, `Could not reach tablet-checkin: ${err.message}`, 'error');
    return;
  }

  if (!devices.length) {
    deviceSelect.innerHTML = '<option>No tablets registered yet</option>';
    return;
  }

  deviceSelect.innerHTML = devices.map(d =>
    `<option value="${d.device_id}" ${d.status === 'busy' ? 'disabled' : ''}>
      ${escapeHtml(d.name)}${d.status === 'busy' ? ' (busy)' : ''}
    </option>`
  ).join('');
  sendBtn.disabled = false;

  sendBtn.addEventListener('click', async () => {
    sendBtn.disabled = true;
    setMsg(msgEl, 'Sending…', 'warn');
    try {
      const res = await fetch(`${baseUrl}/api/staff/push`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiKey}` },
        body: JSON.stringify({ booking_id: bookingId, device_id: deviceSelect.value }),
      });
      const body = await res.json().catch(() => ({}));
      if (res.status === 409) {
        setMsg(msgEl, body.error || 'That tablet is busy with another guest right now.', 'warn');
      } else if (!res.ok) {
        throw new Error(body.error || `HTTP ${res.status}`);
      } else {
        setMsg(msgEl, 'Sent — the tablet should navigate now.', 'ok');
      }
    } catch (err) {
      setMsg(msgEl, `Failed: ${err.message}`, 'error');
    } finally {
      sendBtn.disabled = false;
    }
  });
}

function setMsg(el, text, kind) {
  el.textContent = text;
  el.className = `msg ${kind}`;
}

function escapeHtml(s) {
  const div = document.createElement('div');
  div.textContent = s;
  return div.innerHTML;
}

main();