let modalEventListeners = [];

function openInstagramModal() {
  const modal = document.getElementById('instagramModal');
  if (modal) {
    modal.style.display = 'flex';
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }
}

function closeInstagramModal() {
  const modal = document.getElementById('instagramModal');
  if (modal) {
    modal.classList.add('hidden');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
  }
}

function openFacebookModal() {
  const modal = document.getElementById('facebookModal');
  if (modal) {
    modal.style.display = 'flex';
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }
}

function closeFacebookModal() {
  const modal = document.getElementById('facebookModal');
  if (modal) {
    modal.classList.add('hidden');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
  }
}

function handleModalOutsideClick(e) {
  if (e.target && (e.target.id === 'instagramModal' || e.target.id === 'facebookModal')) {
    if (e.target.id === 'instagramModal') {
      closeInstagramModal();
    } else if (e.target.id === 'facebookModal') {
      closeFacebookModal();
    }
  }
}

function handleEscapeKey(e) {
  if (e.key === 'Escape') {
    closeInstagramModal();
    closeFacebookModal();
  }
}

function setupSocialMediaButtons() {
  // Set up Instagram button
  const instagramButton = document.querySelector('button[onclick="openInstagramModal()"]');
  if (instagramButton) {
    instagramButton.removeAttribute('onclick');
    instagramButton.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      openInstagramModal();
    });
  }

  // Set up Facebook button
  const facebookButton = document.querySelector('button[onclick="openFacebookModal()"]');
  if (facebookButton) {
    facebookButton.removeAttribute('onclick');
    facebookButton.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      openFacebookModal();
    });
  }

  // Set up Instagram close button
  const instagramCloseButton = document.querySelector('button[onclick="closeInstagramModal()"]');
  if (instagramCloseButton) {
    instagramCloseButton.removeAttribute('onclick');
    instagramCloseButton.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      closeInstagramModal();
    });
  }

  // Set up Facebook close button
  const facebookCloseButton = document.querySelector('button[onclick="closeFacebookModal()"]');
  if (facebookCloseButton) {
    facebookCloseButton.removeAttribute('onclick');
    facebookCloseButton.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      closeFacebookModal();
    });
  }
}

export function init() {
  // Make functions global for backward compatibility
  window.openInstagramModal = openInstagramModal;
  window.closeInstagramModal = closeInstagramModal;
  window.openFacebookModal = openFacebookModal;
  window.closeFacebookModal = closeFacebookModal;

  // Set up proper event listeners (more reliable than onclick attributes)
  setupSocialMediaButtons();

  // Add modal event listeners
  try {
    const instagramModal = document.getElementById('instagramModal');
    if (instagramModal) {
      const instagramClickHandler = (e) => handleModalOutsideClick(e);
      instagramModal.addEventListener('click', instagramClickHandler);
      modalEventListeners.push({ element: instagramModal, event: 'click', handler: instagramClickHandler });
    }

    const facebookModal = document.getElementById('facebookModal');
    if (facebookModal) {
      const facebookClickHandler = (e) => handleModalOutsideClick(e);
      facebookModal.addEventListener('click', facebookClickHandler);
      modalEventListeners.push({ element: facebookModal, event: 'click', handler: facebookClickHandler });
    }

    const escapeHandler = (e) => handleEscapeKey(e);
    document.addEventListener('keydown', escapeHandler);
    modalEventListeners.push({ element: document, event: 'keydown', handler: escapeHandler });
  } catch (error) {
    console.warn('Error setting up modal event listeners:', error);
  }
}

export function teardown() {
  try {
    // Remove event listeners
    modalEventListeners.forEach(({ element, event, handler }) => {
      if (element && element.removeEventListener) {
        element.removeEventListener(event, handler);
      }
    });
    modalEventListeners = [];

    // Remove global functions
    if (window.openInstagramModal) delete window.openInstagramModal;
    if (window.closeInstagramModal) delete window.closeInstagramModal;
    if (window.openFacebookModal) delete window.openFacebookModal;
    if (window.closeFacebookModal) delete window.closeFacebookModal;

    // Ensure body overflow is reset
    document.body.style.overflow = 'auto';
  } catch (error) {
    console.warn('Error during teardown:', error);
  }
}