const LAST_USERNAME_KEY = 'lastUsername';

const setupView = document.getElementById('setup-view');
const runningView = document.getElementById('running-view');
const usernameInput = document.getElementById('username');
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const pauseBtn = document.getElementById('pause-btn');
const skipBtn = document.getElementById('skip-btn');
const statVisited = document.getElementById('stat-visited');
const statEarned = document.getElementById('stat-earned');
const statusLine = document.getElementById('status-line');
const bannerSlot = document.getElementById('banner-slot');
const jackpotBox = document.getElementById('jackpot-box');
const collectJackpotBtn = document.getElementById('collect-jackpot-btn');

function renderBanner(banner) {
  bannerSlot.innerHTML = '';
  if (!banner) {
    const placeholder = document.createElement('div');
    placeholder.className = 'placeholder';
    placeholder.textContent = 'Advertise here — cortaly.com';
    bannerSlot.appendChild(placeholder);
    return;
  }
  if (banner.html_content) {
    const iframe = document.createElement('iframe');
    iframe.setAttribute('sandbox', ''); // same reasoning as content-script.js's overlay — no script execution, ever
    iframe.srcdoc = banner.html_content;
    bannerSlot.appendChild(iframe);
    return;
  }
  const link = document.createElement('a');
  link.href = banner.click_url;
  link.target = '_blank';
  link.rel = 'noopener noreferrer sponsored';
  link.title = banner.title || '';
  const img = document.createElement('img');
  img.src = banner.image_url;
  img.alt = banner.title || '';
  link.appendChild(img);
  bannerSlot.appendChild(link);
}

function applyState(state) {
  const running = !!(state && state.running);
  setupView.hidden = running;
  runningView.hidden = !running;

  if (!running) return;

  statVisited.textContent = state.totalVisited;
  statEarned.textContent = state.totalEarned.toFixed(2);
  statusLine.textContent = state.lastMessage || '—';
  pauseBtn.textContent = state.paused ? 'Resume' : 'Pause';
  renderBanner(state.hit ? state.hit.banner : null);

  jackpotBox.hidden = !state.jackpotOffer;
}

async function refresh() {
  const res = await api.runtime.sendMessage({ type: 'GET_STATE' });
  if (res && res.ok) applyState(res.state);
}

startBtn.addEventListener('click', async () => {
  const username = usernameInput.value.trim();
  if (!username) return;
  await api.storage.local.set({ [LAST_USERNAME_KEY]: username });
  await api.runtime.sendMessage({ type: 'START', username });
  refresh();
});

stopBtn.addEventListener('click', async () => {
  await api.runtime.sendMessage({ type: 'STOP' });
  refresh();
});

pauseBtn.addEventListener('click', async () => {
  await api.runtime.sendMessage({ type: 'TOGGLE_PAUSE' });
  refresh();
});

skipBtn.addEventListener('click', async () => {
  await api.runtime.sendMessage({ type: 'SKIP' });
  refresh();
});

collectJackpotBtn.addEventListener('click', async () => {
  await api.runtime.sendMessage({ type: 'COLLECT_JACKPOT' });
  refresh();
});

api.runtime.onMessage.addListener((message) => {
  if (message.type === 'STATE_UPDATE') applyState(message.state);
});

(async () => {
  const stored = await api.storage.local.get(LAST_USERNAME_KEY);
  if (stored[LAST_USERNAME_KEY]) usernameInput.value = stored[LAST_USERNAME_KEY];
  refresh();
})();
