const baseUrlInput = document.getElementById('baseUrl');
const apiKeyInput = document.getElementById('apiKey');
const statusEl = document.getElementById('status');

async function load() {
  const { baseUrl, apiKey } = await chrome.storage.local.get(['baseUrl', 'apiKey']);
  if (baseUrl) baseUrlInput.value = baseUrl;
  if (apiKey) apiKeyInput.value = apiKey; // deliberately shown back here (options page,
  // not the popup) so the value can be corrected without regenerating the key.
}

async function save() {
  const baseUrl = baseUrlInput.value.trim().replace(/\/$/, '');
  const apiKey = apiKeyInput.value.trim();
  await chrome.storage.local.set({ baseUrl, apiKey });
  statusEl.textContent = 'Saved.';
  statusEl.style.color = '#16a34a';
}

async function test() {
  const { baseUrl, apiKey } = await chrome.storage.local.get(['baseUrl', 'apiKey']);
  if (!baseUrl || !apiKey) {
    statusEl.textContent = 'Set both fields and save first.';
    statusEl.style.color = '#dc2626';
    return;
  }
  statusEl.textContent = 'Testing…';
  statusEl.style.color = '#64748b';
  try {
    const res = await fetch(`${baseUrl}/api/staff/devices`, {
      headers: { Authorization: `Bearer ${apiKey}` },
    });
    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      throw new Error(body.error || `HTTP ${res.status}`);
    }
    const devices = await res.json();
    statusEl.textContent = `Connected — found ${devices.length} tablet(s).`;
    statusEl.style.color = '#16a34a';
  } catch (err) {
    statusEl.textContent = `Failed: ${err.message}`;
    statusEl.style.color = '#dc2626';
  }
}

document.getElementById('save').addEventListener('click', save);
document.getElementById('test').addEventListener('click', test);
load();