const button = document.getElementById('toggle');
async function render() {
  const {enabled = true} = await chrome.storage.local.get('enabled');
  document.getElementById('state').textContent = enabled ? 'Enabled · Neon green icon' : 'Disabled · Grey icon';
  button.textContent = enabled ? 'Disable Merchant Lens' : 'Enable Merchant Lens';
  button.setAttribute('aria-pressed', String(enabled));
  button.disabled = false;
}
button.addEventListener('click', async () => {
  button.disabled = true;
  const {enabled = true} = await chrome.storage.local.get('enabled');
  await chrome.storage.local.set({enabled:!enabled});
  await render();
});
chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'local' && changes.enabled) void render();
});
chrome.commands.getAll().then(commands => {
  const shortcut = commands.find(c => c.name === 'toggle-merchant-lens')?.shortcut;
  document.getElementById('shortcut').textContent = shortcut || 'Alt+Shift+M on supported bank pages (browser shortcut unassigned)';
});
document.getElementById('shortcuts').addEventListener('click', event => {
  event.preventDefault();
  const prefix = /Edg\//.test(navigator.userAgent) ? 'edge' : 'chrome';
  void chrome.tabs.create({url:`${prefix}://extensions/shortcuts`});
});
void render();
async function refreshCapture() {
  const tabs = await chrome.tabs.query({});
  const states = await Promise.all(tabs.map(tab => chrome.tabs.sendMessage(tab.id, {type:'merchant-lens:status'}).catch(() => null)));
  const supported = states.filter(state => state?.onCard);
  document.getElementById('capture').textContent = supported.length ?
    supported.map(state => `${state.bank}: ${state.count} records${state.enabled ? '' : ' (paused)'}`).join(' · ') :
    'No supported transaction tabs found. Open a transaction page and reload it.';
}
document.getElementById('refresh').addEventListener('click', () => { void refreshCapture(); });
void refreshCapture();