// Profile page specific functionality

document.addEventListener('DOMContentLoaded', function() {
  // Initialize the app
  initializeApp()

  // Setup dialog event handlers
  setupDialogHandlers()
})

// Setup dialog event handlers
function setupDialogHandlers() {
  // Close dialog when clicking outside
  const dialog = document.getElementById('deviceLinkDialog')
  if (dialog) {
    dialog.addEventListener('click', function(e) {
      if (e.target === this) {
        closeDeviceLinkDialog()
      }
    })
  }

  // Close dialog when pressing Escape key
  document.addEventListener('keydown', function(e) {
    const dialog = document.getElementById('deviceLinkDialog')
    if (e.key === 'Escape' && dialog && dialog.open) {
      closeDeviceLinkDialog()
    }
  })
}

// Open device link dialog
function openDeviceLinkDialog() {
  const dialog = document.getElementById('deviceLinkDialog')
  const container = document.querySelector('.container')
  const body = document.body

  if (dialog && container && body) {
    // Add blur and disable effects
    container.classList.add('dialog-open')
    body.classList.add('dialog-open')

    dialog.showModal()
    generateDeviceLink()
  }
}

// Close device link dialog
function closeDeviceLinkDialog() {
  const dialog = document.getElementById('deviceLinkDialog')
  const container = document.querySelector('.container')
  const body = document.body

  if (dialog && container && body) {
    // Remove blur and disable effects
    container.classList.remove('dialog-open')
    body.classList.remove('dialog-open')

    dialog.close()
  }
}

// Generate device link function
async function generateDeviceLink() {
  clearStatus('deviceAdditionStatus')
  showStatus('deviceAdditionStatus', 'Generating device link...', 'info')

  try {
    const response = await fetch('/api/create-device-link', {
      method: 'POST',
      credentials: 'include'
    })

    const result = await response.json()

    if (result.error) {
      throw new Error(result.error)
    }

    // Update UI with the link
    const deviceLinkText = document.getElementById('deviceLinkText')

    if (deviceLinkText) {
      deviceLinkText.href = result.addition_link
      deviceLinkText.textContent = result.addition_link.replace(/^[a-z]+:\/\//i, '')

      // Add click event listener for copying the link
      deviceLinkText.addEventListener('click', function(e) {
        e.preventDefault() // Prevent navigation
        navigator.clipboard.writeText(deviceLinkText.href).then(() => {
          closeDeviceLinkDialog() // Close the dialog
          showStatus('deviceAdditionStatus', 'Device registration link copied', 'success') // Display status
        }).catch(() => {
          showStatus('deviceAdditionStatus', 'Failed to copy device registration link', 'error')
        })
      })
    }

    // Store link globally for copy function
    window.currentDeviceLink = result.addition_link

    // Generate QR code
    const qrCodeEl = document.getElementById('qrCode')
    if (qrCodeEl && typeof QRCode !== 'undefined') {
      qrCodeEl.innerHTML = ''
      new QRCode(qrCodeEl, {
        text: result.addition_link,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M
      })
    }

    clearStatus('deviceAdditionStatus')
  } catch (error) {
    showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error')
  }
}

// Make functions available globally for onclick handlers
window.openDeviceLinkDialog = openDeviceLinkDialog
window.closeDeviceLinkDialog = closeDeviceLinkDialog