// Popup script

document.addEventListener('DOMContentLoaded', async () => {
  const loginForm = document.getElementById('login-form');
  const loggedInSection = document.getElementById('logged-in');
  const loginBtn = document.getElementById('login-btn');
  const logoutBtn = document.getElementById('logout-btn');
  const pdsUrlInput = document.getElementById('pds-url');
  const identifierInput = document.getElementById('identifier');
  const passwordInput = document.getElementById('password');
  const errorMsg = document.getElementById('error-msg');
  const autoScrobbleCheckbox = document.getElementById('auto-scrobble');

  // Check auth status
  const response = await chrome.runtime.sendMessage({ type: 'GET_AUTH_STATUS' });

  if (response.authenticated) {
    showLoggedIn();
  } else {
    showLogin();
  }

  // Load settings
  const settings = await chrome.storage.local.get(['autoScrobble', 'pdsUrl']);
  if (settings.autoScrobble !== undefined) {
    autoScrobbleCheckbox.checked = settings.autoScrobble;
  }
  if (settings.pdsUrl) {
    pdsUrlInput.value = settings.pdsUrl;
  }

  // Get current track and recent scrobbles
  updateCurrentTrack();
  updateRecentScrobbles();

  // Listen for track updates
  chrome.runtime.onMessage.addListener((message) => {
    if (message.type === 'TRACK_UPDATE') {
      updateCurrentTrack();
    } else if (message.type === 'SCROBBLE_SUCCESS') {
      updateRecentScrobbles();
    }
  });

  // Login handler
  loginBtn.addEventListener('click', async () => {
    const identifier = identifierInput.value.trim();
    const password = passwordInput.value;
    let pdsUrl = pdsUrlInput.value.trim();

    if (!pdsUrl) {
      pdsUrl = 'https://bsky.social';
    }

    if (!identifier || !password) {
      errorMsg.textContent = 'Please enter both handle/email and password';
      return;
    }

    loginBtn.disabled = true;
    loginBtn.textContent = 'Logging in...';
    errorMsg.textContent = '';

    // Save PDS URL
    await chrome.storage.local.set({ pdsUrl });

    const result = await chrome.runtime.sendMessage({
      type: 'LOGIN',
      data: { identifier, password, pdsUrl }
    });

    if (result.success) {
      showLoggedIn();
      passwordInput.value = '';
    } else {
      errorMsg.textContent = result.error || 'Login failed';
    }

    loginBtn.disabled = false;
    loginBtn.textContent = 'Login';
  });

  // Logout handler
  logoutBtn.addEventListener('click', async () => {
    await chrome.runtime.sendMessage({ type: 'LOGOUT' });
    showLogin();
  });

  // Auto-scrobble setting
  autoScrobbleCheckbox.addEventListener('change', async (e) => {
    await chrome.storage.local.set({ autoScrobble: e.target.checked });
  });

  function showLogin() {
    loginForm.style.display = 'block';
    loggedInSection.style.display = 'none';
  }

  function showLoggedIn() {
    loginForm.style.display = 'none';
    loggedInSection.style.display = 'block';
  }

  async function updateCurrentTrack() {
    const response = await chrome.runtime.sendMessage({ type: 'GET_CURRENT_TRACK' });
    const currentTrackDiv = document.getElementById('current-track');

    if (response && response.track) {
      const track = response.track;
      currentTrackDiv.innerHTML = `
        <div class="track-info">
          <div class="track-title">${track.track}</div>
          <div class="track-artist">${track.artist}</div>
        </div>
      `;
    } else {
      currentTrackDiv.innerHTML = '<p class="info">No track detected</p>';
    }
  }

  async function updateRecentScrobbles() {
    const response = await chrome.runtime.sendMessage({ type: 'GET_RECENT_TRACKS' });
    const recentTracksList = document.getElementById('recent-tracks-list');

    if (response && response.tracks && response.tracks.length > 0) {
      // Show only the latest 3 scrobbles
      const latestTracks = response.tracks.slice(0, 3);
      recentTracksList.innerHTML = latestTracks.map(track => `
        <div class="recent-track">
          <span class="recent-track-title">${track.track}</span>
          <span class="recent-track-artist">${track.artist}</span>
        </div>
      `).join('');
    } else {
      recentTracksList.innerHTML = '<p class="info small">No recent scrobbles</p>';
    }
  }
});