import Routing from '../../services/modal.service';
import Services from '../../services/service';
import { addSubscription } from '../../utils/subscription.utils';
import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji} from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/html.utils';
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
import { navigate, registerAllListeners } from '../../router';

// Home page loading spinner functions
function showHomeLoadingSpinner(message: string = 'Loading...') {
  // Remove existing spinner if any
  hideHomeLoadingSpinner();

  // Create spinner overlay
  const overlay = document.createElement('div');
  overlay.id = 'home-loading-overlay';
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    backdrop-filter: blur(3px);
  `;

  // Create spinner content
  const spinnerContent = document.createElement('div');
  spinnerContent.style.cssText = `
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 350px;
    width: 90%;
  `;

  // Create spinner
  const spinner = document.createElement('div');
  spinner.style.cssText = `
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3a506b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
  `;

  // Create message
  const messageEl = document.createElement('div');
  messageEl.textContent = message;
  messageEl.style.cssText = `
    font-size: 14px;
    color: #3a506b;
    font-weight: 500;
  `;

  // Add CSS animation if not already present
  if (!document.getElementById('home-spinner-styles')) {
    const style = document.createElement('style');
    style.id = 'home-spinner-styles';
    style.textContent = `
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `;
    document.head.appendChild(style);
  }

  // Assemble spinner
  spinnerContent.appendChild(spinner);
  spinnerContent.appendChild(messageEl);
  overlay.appendChild(spinnerContent);

  // Add to document
  document.body.appendChild(overlay);
}

function hideHomeLoadingSpinner() {
  const overlay = document.getElementById('home-loading-overlay');
  if (overlay) {
    overlay.remove();
  }
}

export { QrScannerComponent };
export async function initHomePage(): Promise<void> {
  console.log('INIT-HOME');

  // Show loading spinner during home page initialization
  showHomeLoadingSpinner('Initializing pairing interface...');

  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
  container.querySelectorAll('.tab').forEach((tab) => {
    addSubscription(tab, 'click', () => {
      container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
      tab.classList.add('active');

      container.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active'));
      container.querySelector(`#${tab.getAttribute('data-tab') as string}`)?.classList.add('active');
    });
  });

  try {
    const service = await Services.getInstance();
    const spAddress = await service.getDeviceAddress();
    // generateQRCode(spAddress);
    generateCreateBtn();
    displayEmojis(spAddress);

    // Hide loading spinner after initialization
    hideHomeLoadingSpinner();
  } catch (error) {
    console.error('Error initializing home page:', error);
    hideHomeLoadingSpinner();
    throw error;
  }
}

//// Modal
export async function openModal(myAddress: string, receiverAddress: string) {
  const router = await Routing.getInstance();
  router.openLoginModal(myAddress, receiverAddress);
}

// const service =  await Services.getInstance()
// service.setNotification()

function scanDevice() {
  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
  const scannerImg = container.querySelector('#scanner') as HTMLElement;
  if (scannerImg) scannerImg.style.display = 'none';
  const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
  if (scannerQrCode) scannerQrCode.style.display = 'block';
  const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
  if (scanButton) scanButton.style.display = 'none';
  const reader = container?.querySelector('#qr-reader');
  if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
}

async function populateMemberSelect() {
  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
  const memberSelect = container.querySelector('#memberSelect') as HTMLSelectElement;

  if (!memberSelect) {
    console.error('Could not find memberSelect element');
    return;
  }

  const service = await Services.getInstance();
  const members = await service.getAllMembersSorted();

  for (const [processId, member] of Object.entries(members)) {
    const process = await service.getProcess(processId);
    let memberPublicName;

    if (process) {
      const publicMemberData = service.getPublicData(process);
      if (publicMemberData) {
        const extractedName = publicMemberData['memberPublicName'];
        if (extractedName !== undefined && extractedName !== null) {
          memberPublicName = extractedName;
        }
      }
    }

    if (!memberPublicName) {
      memberPublicName = 'Unnamed Member';
    }

    // Récupérer les emojis pour ce processId
    const emojis = await addressToEmoji(processId);

    const option = document.createElement('option');
    option.value = processId;
    option.textContent = `${memberPublicName} (${emojis})`;
    memberSelect.appendChild(option);
  }
}

(window as any).populateMemberSelect = populateMemberSelect;

(window as any).scanDevice = scanDevice;