const DEFAULT_BACKEND = 'http://localhost:8000';

const statusEl = document.getElementById('status');
const form = document.getElementById('settings-form');
const backendUrlInput = document.getElementById('backend-url');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');

function setStatus(message, isError = false) {
  statusEl.textContent = message;
  statusEl.classList.remove('hidden');
  statusEl.classList.toggle('error', isError);
  statusEl.classList.toggle('success', !isError);
}

async function loadSettings() {
  const settings = await browser.storage.local.get(['backendUrl', 'username']);
  backendUrlInput.value = settings.backendUrl || DEFAULT_BACKEND;
  usernameInput.value = settings.username || '';
}

async function saveSettingsAndLogin(event) {
  event.preventDefault();
  const backendUrl = backendUrlInput.value.trim();
  const username = usernameInput.value.trim();
  const password = passwordInput.value;

  if (!backendUrl || !username || !password) {
    setStatus('Please fill in all fields', true);
    return;
  }

  try {
    const response = await fetch(`${backendUrl}/api/auth/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });

    if (!response.ok) {
      throw new Error('Login failed');
    }

    const data = await response.json();
    await browser.storage.local.set({
      backendUrl,
      username,
      accessToken: data.access_token,
      tokenType: data.token_type,
      tokenExpiresAt: data.expires_at,
      refreshToken: data.refresh_token,
    });

    setStatus('Logged in successfully');
  } catch (error) {
    setStatus('Unable to log in. Check backend URL and credentials.', true);
  }
}

form.addEventListener('submit', saveSettingsAndLogin);
loadSettings();