import { browser } from 'wxt/browser';
import { DEFAULT_CONNECTION_STATUS, DEFAULT_LOCK_STATE, type ConnectionStatus, type LockState } from '@/shared/types';
import type { NexaMessage } from '@/shared/messaging';

const app = document.getElementById('app');
if (!app) throw new Error('Popup root element #app not found.');

app.innerHTML = `
  <header>
    <h1>Nexa</h1>
    <p class="subtitle">Trading companion</p>
  </header>

  <section class="connection" id="connection"></section>
  <section class="status" id="status"></section>

  <a class="thresholds-link" id="thresholds-link" href="#" title="Threshold settings are not part of this milestone">
    Adjust loss thresholds →
  </a>
`;

const connectionEl = document.getElementById('connection') as HTMLElement;
const statusEl = document.getElementById('status') as HTMLElement;

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

const CONNECTION_LABELS: Record<ConnectionStatus, string> = {
  connecting: 'Connecting…',
  connected: 'Connected',
  disconnected: 'Disconnected — retrying',
  'auth-error': 'Sign-in failed — retrying',
};

function renderConnection(status: ConnectionStatus): void {
  connectionEl.innerHTML = `<span class="connection-dot connection-${status}"></span> ${CONNECTION_LABELS[status]}`;
}

function renderStatus(state: LockState): void {
  statusEl.innerHTML = state.locked
    ? `<div class="badge badge-locked">🔒 Locked</div>
       <p class="reason">${escapeHtml(state.reason ?? 'No reason provided.')}</p>
       <p class="scope">Scope: ${escapeHtml(state.scope)}</p>`
    : `<div class="badge badge-unlocked">Unlocked</div>`;
}

async function loadLockState(): Promise<LockState> {
  const message: NexaMessage = { type: 'nexa:get-lock-state' };
  const state = (await browser.runtime.sendMessage(message)) as LockState | undefined;
  return state ?? DEFAULT_LOCK_STATE;
}

async function loadConnectionStatus(): Promise<ConnectionStatus> {
  const message: NexaMessage = { type: 'nexa:get-connection-status' };
  const status = (await browser.runtime.sendMessage(message)) as ConnectionStatus | undefined;
  return status ?? DEFAULT_CONNECTION_STATUS;
}

loadLockState().then(renderStatus);
loadConnectionStatus().then(renderConnection);

browser.runtime.onMessage.addListener((message: NexaMessage) => {
  if (message?.type === 'nexa:lock-state-changed') {
    renderStatus(message.state);
  } else if (message?.type === 'nexa:connection-status-changed') {
    renderConnection(message.status);
  }
});