popup.js

let audience = 0;

document.addEventListener('DOMContentLoaded', () => {
  checkSession();
  setupColorSync('textColorPicker', 'textColorHex', 'textSwatch');
  setupColorSync('bgColorPicker', 'bgColorHex', 'bgSwatch');
  updatePreview();

  document.getElementById('noteText').addEventListener('input', updatePreview);
  document.getElementById('textColorHex').addEventListener('input', updatePreview);
  document.getElementById('bgColorHex').addEventListener('input', updatePreview);


  document.getElementById('audFriends').addEventListener('click', function () { setAudience(this); });
  document.getElementById('audClose').addEventListener('click', function () { setAudience(this); });


  document.getElementById('sendBtn').addEventListener('click', sendNote);
});

async function checkSession() {
  const dot = document.getElementById('statusDot');
  const txt = document.getElementById('statusText');
  const btn = document.getElementById('sendBtn');

  try {
    let cookies = await chrome.cookies.getAll({ domain: '.instagram.com' });
    if (!cookies.length) cookies = await chrome.cookies.getAll({ domain: 'instagram.com' });

    const session = cookies.find(c => c.name === 'sessionid');
    const csrf = cookies.find(c => c.name === 'csrftoken');
    const uid = cookies.find(c => c.name === 'ds_user_id');

    if (session && csrf) {
      dot.className = 'status-dot ready';
      txt.textContent = `Session active — uid:${uid ? uid.value : 'found'}`;
      btn.disabled = false;
    } else {
      dot.className = 'status-dot error';
      txt.textContent = 'Not logged in — open Instagram first';
      btn.disabled = true;
    }
  } catch (e) {
    dot.className = 'status-dot error';
    txt.textContent = 'Error: ' + e.message;
    btn.disabled = true;
  }
}

function setupColorSync(pickerId, hexId, swatchId) {
  const picker = document.getElementById(pickerId);
  const hex = document.getElementById(hexId);
  const swatch = document.getElementById(swatchId);

  swatch.style.background = picker.value;

  picker.addEventListener('input', () => {
    hex.value = picker.value.toUpperCase();
    swatch.style.background = picker.value;
    updatePreview();
  });

  hex.addEventListener('input', () => {
    const val = hex.value.startsWith('#') ? hex.value : '#' + hex.value;
    if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
      picker.value = val;
      swatch.style.background = val;
      updatePreview();
    }
  });
}

function updatePreview() {
  const text = document.getElementById('noteText').value || 'Your note here...';
  const textColor = document.getElementById('textColorHex').value || '#ffffff';
  const bgColor = document.getElementById('bgColorHex').value || '#4604b3';

  document.getElementById('notePreview').style.background = bgColor;
  document.getElementById('previewText').style.color = textColor;
  document.getElementById('previewText').textContent = text;
}

function setAudience(btn) {
  document.querySelectorAll('.aud-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  audience = parseInt(btn.dataset.val);
}

async function sendNote() {
  const btn = document.getElementById('sendBtn');
  const noteText = document.getElementById('noteText').value.trim();

  if (!noteText) { showToast('Please enter note text', 'error'); return; }

  const textColor = normalizeHex(document.getElementById('textColorHex').value);
  const bgColor = normalizeHex(document.getElementById('bgColorHex').value);

  btn.disabled = true;
  btn.innerHTML = '<span class="btn-text"><span class="spinner"></span>Sending...</span>';

  try {
    let allCookies = await chrome.cookies.getAll({ domain: '.instagram.com' });
    if (!allCookies.length) allCookies = await chrome.cookies.getAll({ domain: 'instagram.com' });

    const getCookie = name => allCookies.find(c => c.name === name)?.value || '';
    const sessionid = getCookie('sessionid');
    const csrftoken = getCookie('csrftoken');
    const ds_user_id = getCookie('ds_user_id');

    if (!sessionid || !csrftoken) { showToast('Not logged in to Instagram', 'error'); return; }

    const cookieStr = allCookies.map(c => `${c.name}=${c.value}`).join('; ');

    const result = await chrome.runtime.sendMessage({
      action: 'sendNote',
      payload: { cookieStr, csrftoken, ds_user_id, noteText, textColor, bgColor, audience }
    });

    if (result.success) {
      showToast('✦ Note sent successfully!', 'success');
      document.getElementById('noteText').value = '';
      updatePreview();
    } else {
      showToast(result.error || 'Failed to send note', 'error');
    }
  } catch (err) {
    showToast('Error: ' + err.message, 'error');
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<span class="btn-text">✦ Send Note</span>';
  }
}

function normalizeHex(val) {
  val = val.trim();
  if (!val.startsWith('#')) val = '#' + val;
  return val.toUpperCase();
}

function showToast(msg, type = 'success') {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.className = `toast ${type}`;
  setTimeout(() => toast.classList.add('show'), 10);
  setTimeout(() => toast.classList.remove('show'), 3000);
}