// Service configurations
const serviceConfig = {
  'online-counseling': {
    title: 'Онлайн зөвлөгөө',
    description: 'Дүрсгүй дуудлага, дуут болон текст мессэжээр мэргэжилтэнтэй шууд харилцах боломж.',
    price: '₮ 120,000',
    priceNumber: 120000,
    icon: 'fa-video',
    color: 'from-blue-500 to-blue-600'
  },
  'family-therapy': {
    title: 'Гэр бүлийн зөвлөгөө',
    description: 'Гэр бүлийн харилцаа, хүүхдийн асуудал, гэрлэлтийн зөвлөгөө зэрэг олон хүнтэй хамтарсан зөвлөгөө.',
    price: '₮ 180,000',
    priceNumber: 180000,
    icon: 'fa-users',
    color: 'from-green-500 to-green-600'
  },
  'group-therapy': {
    title: 'Бүлгийн сэтгэл засал',
    description: 'Нийтлэг асуудалтай хүмүүстэй хамтарсан бүлгийн хэлбэрээрх сэтгэл заслын хичээлүүд.',
    price: '₮ 75,000',
    priceNumber: 75000,
    icon: 'fa-comments',
    color: 'from-yellow-500 to-yellow-600'
  },
  'anonymous-support': {
    title: 'Нууц нэртэй зөвлөгөө',
    description: 'Хэн болохоо нуун, бүрэн нууцлалтайгаар зөвлөгөө авах боломжийг олгодог тусгай үйлчилгээ.',
    price: '₮ 100,000',
    priceNumber: 100000,
    icon: 'fa-user-secret',
    color: 'from-purple-500 to-purple-600'
  },
  'mental-health-coaching': {
    title: 'Сэтгэл зүйн коучинг',
    description: 'Хувийн хөгжил, стресс эсэргүүцэх, зорилго тавих зэргээр мэргэжилтэн коучийн дэмжлэг.',
    price: '₮ 150,000',
    priceNumber: 150000,
    icon: 'fa-brain',
    color: 'from-pink-500 to-pink-600'
  },
  'emergency-support': {
    title: 'Яаралтай тусламж',
    description: '24/7 яаралтай сэтгэл зүйн дэмжлэг, хямралын үед шуурхай холбогдох боломжтой.',
    price: 'Үнэгүй',
    priceNumber: 0,
    icon: 'fa-phone',
    color: 'from-red-500 to-red-600'
  },
  'child-teen-counseling': {
    title: 'Хүүхэд, өсвөр насны зөвлөгөө',
    description: 'Хүүхэд болон өсвөр насныхны сэтгэл зүйн асуудалд тусгайлсан мэргэжилтнүүдээс зөвлөгөө.',
    price: '₮ 130,000',
    priceNumber: 130000,
    icon: 'fa-child',
    color: 'from-blue-500 to-cyan-500'
  },
  'play-therapy': {
    title: 'Тоглоомын эмчилгээ',
    description: 'Хүүхдийн хэлээр тоглоом, зураг зурах замаар сэтгэл зүйн асуудлыг шийдвэрлэх арга.',
    price: '₮ 110,000',
    priceNumber: 110000,
    icon: 'fa-gamepad',
    color: 'from-green-500 to-emerald-500'
  },
  'art-therapy': {
    title: 'Урлагийн эмчилгээ',
    description: 'Зураг, урлагаар дамжуулан хүүхдүүдийн сэтгэл санааг илэрхийлэх, эдгэрүүлэх арга.',
    price: '₮ 90,000',
    priceNumber: 90000,
    icon: 'fa-palette',
    color: 'from-yellow-500 to-orange-500'
  },
  'learning-support': {
    title: 'Сурах чадварын дэмжлэг',
    description: 'Анхаарал төвлөрүүлэх, сурах арга барил, сурагчийн сэтгэл зүйн дэмжлэг.',
    price: '₮ 120,000',
    priceNumber: 120000,
    icon: 'fa-graduation-cap',
    color: 'from-purple-500 to-violet-500'
  },
  'teen-group-support': {
    title: 'Өсвөрүүдийн бүлэг',
    description: 'Насандаа тохирсон бүлгийн хэлбэрээр өсвөрүүдийн хамтын сэтгэл зүйн дэмжлэг.',
    price: '₮ 80,000',
    priceNumber: 80000,
    icon: 'fa-user-friends',
    color: 'from-pink-500 to-rose-500'
  },
  'parent-consultation': {
    title: 'Эцэг эхчүүдэд зөвлөгөө',
    description: 'Хүүхэдтэйгээ хэрхэн харьцах, асуудлыг шийдвэрлэхэд эцэг эхчүүдэд зориулсан зөвлөгөө.',
    price: '₮ 140,000',
    priceNumber: 140000,
    icon: 'fa-hands-helping',
    color: 'from-teal-500 to-cyan-500'
  },
  'test-consultation': {
    title: 'Тестийн үр дүнгийн зөвлөгөө',
    description: 'Таны тестийн үр дүнг мэргэжилтэнтэй хэлэлцэх 45 минутын зөвлөгөө.',
    price: '₮ 80,000',
    priceNumber: 80000,
    icon: 'fa-user-md',
    color: 'from-indigo-500 to-purple-500'
  }
};

// Bank transfer information
const bankInfo = {
  bankName: 'ХААН банк',
  iban: 'MN920005005427040680',
  accountName: 'Д.Ганбаяр'
};

let currentServicePrice = 0;

function updateServiceDetails() {
  const urlParams = new URLSearchParams(window.location.search);
  const selectedService = urlParams.get('service');
  
  if (selectedService && serviceConfig[selectedService]) {
    const config = serviceConfig[selectedService];
    
    // Update service display
    document.getElementById('service-title').textContent = config.title;
    document.getElementById('service-description').textContent = config.description;
    document.getElementById('service-price').textContent = config.price;
    document.getElementById('total-price').textContent = config.price;
    document.getElementById('service-icon-class').className = `fas ${config.icon} text-white text-3xl`;
    
    // Update service icon background
    const serviceIcon = document.getElementById('service-icon');
    serviceIcon.className = `w-20 h-20 bg-gradient-to-r ${config.color} rounded-full flex items-center justify-center mx-auto mb-6`;
    
    // Update hidden form fields
    document.getElementById('selectedService').value = selectedService;
    document.getElementById('servicePrice').value = config.price;
    
    // Store current price for QR code generation
    currentServicePrice = config.priceNumber;
  }
}

function handleContractCheckbox() {
  const contractCheckbox = document.getElementById('contract-agreement');
  const paymentBtn = document.getElementById('payment-btn');
  const contractError = document.getElementById('contract-error');
  
  if (contractCheckbox.checked) {
    // Enable payment button
    paymentBtn.className = 'w-full py-4 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold text-lg rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-xl cursor-pointer';
    paymentBtn.disabled = false;
    paymentBtn.innerHTML = '<i class="fas fa-credit-card mr-2"></i>Төлбөр төлж захиалах';
    contractError.classList.add('hidden');
  } else {
    // Disable payment button
    paymentBtn.className = 'w-full py-4 bg-gray-400 text-white font-semibold text-lg rounded-xl transition-all duration-300 cursor-not-allowed';
    paymentBtn.disabled = true;
    paymentBtn.innerHTML = '<i class="fas fa-lock mr-2"></i>Эхлээд гэрээг зөвшөөрнө үү';
  }
}

function validateForm() {
  const contractCheckbox = document.getElementById('contract-agreement');
  const contractError = document.getElementById('contract-error');
  
  if (!contractCheckbox.checked) {
    contractError.classList.remove('hidden');
    contractCheckbox.scrollIntoView({ behavior: 'smooth' });
    return false;
  }
  
  // Validate required form fields
  const requiredFields = ['lastName', 'firstName', 'email', 'phone'];
  const serviceTypeRadios = document.querySelectorAll('input[name="serviceType"]');
  
  let isServiceTypeSelected = false;
  serviceTypeRadios.forEach(radio => {
    if (radio.checked) {
      isServiceTypeSelected = true;
    }
  });
  
  for (const fieldName of requiredFields) {
    const field = document.getElementById(fieldName);
    if (!field.value.trim()) {
      alert(`${field.labels[0].textContent.replace('*', '').trim()} талбарыг бөглөнө үү.`);
      field.focus();
      return false;
    }
  }
  
  if (!isServiceTypeSelected) {
    alert('Харилцааны аргаа сонгоно уу.');
    return false;
  }
  
  return true;
}

function openPaymentModal() {
  if (!validateForm()) {
    return;
  }
  
  const modal = document.getElementById('payment-modal');
  modal.classList.remove('hidden');
  
  // Update payment amounts in modal
  const currentPrice = document.getElementById('service-price').textContent;
  document.getElementById('modal-payment-amount').textContent = currentPrice;
  document.getElementById('manual-payment-amount').textContent = currentPrice;
  
  // Generate QR code for bank transfer
  generateQRCode();
}

function closePaymentModal() {
  const modal = document.getElementById('payment-modal');
  modal.classList.add('hidden');
  
  // Reset payment method selection
  document.querySelectorAll('input[name="paymentMethodModal"]').forEach(radio => {
    radio.checked = false;
  });
  
  // Hide payment sections
  document.getElementById('qr-payment-section').classList.add('hidden');
  document.getElementById('bank-info-section').classList.add('hidden');
}

function generateQRCode() {
  const qrContainer = document.getElementById('qr-code-container');
  const amount = currentServicePrice;
  const description = `Сэтгэл зүйн зөвлөгөө - ${document.getElementById('service-title').textContent}`;
  
  // Create QR code data for bank transfer
  const qrData = `BANK:${bankInfo.bankName}|IBAN:${bankInfo.iban}|NAME:${bankInfo.accountName}|AMOUNT:${amount}|DESC:${description}`;
  
  // For demonstration, we'll use a QR code generator service
  // In a real application, you would use a proper QR code library
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(qrData)}`;
  
  qrContainer.innerHTML = `
    <img src="${qrCodeUrl}" alt="QR Code" class="w-64 h-64 rounded-xl" onerror="showQRError()">
  `;
}

function showQRError() {
  const qrContainer = document.getElementById('qr-code-container');
  qrContainer.innerHTML = `
    <div class="text-center p-8">
      <i class="fas fa-qrcode text-4xl text-gray-400 mb-4"></i>
      <p class="text-gray-500 mb-4">QR код үүсгэхэд алдаа гарлаа</p>
      <p class="text-sm text-gray-400">Банкны мэдээллийг ашиглан гараар шилжүүлэг хийнэ үү</p>
    </div>
  `;
}

function handlePaymentMethodChange(event) {
  const selectedMethod = event.target.value;
  const qrSection = document.getElementById('qr-payment-section');
  const bankInfoSection = document.getElementById('bank-info-section');
  
  // Hide all sections first
  qrSection.classList.add('hidden');
  bankInfoSection.classList.add('hidden');
  
  // Show selected section
  if (selectedMethod === 'qpay') {
    qrSection.classList.remove('hidden');
  } else if (selectedMethod === 'bank-info') {
    bankInfoSection.classList.remove('hidden');
  }
}

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    // Show temporary success message
    const button = event.target;
    const originalIcon = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check"></i>';
    button.className = 'text-green-500';
    
    setTimeout(() => {
      button.innerHTML = originalIcon;
      button.className = 'text-blue-500 hover:text-blue-700';
    }, 2000);
  }).catch(() => {
    alert('Хуулахад алдаа гарлаа. Гараар хуулна уу: ' + text);
  });
}

function confirmPayment() {
  // Here you would normally verify the payment with your backend
  // For now, we'll just show the success modal
  closePaymentModal();
  showSuccessModal();
  
  // Submit the form data to the backend
  submitBookingData();
}

function submitBookingData() {
  // Collect form data
  const formData = {
    selectedService: document.getElementById('selectedService').value,
    servicePrice: document.getElementById('servicePrice').value,
    lastName: document.getElementById('lastName').value,
    firstName: document.getElementById('firstName').value,
    email: document.getElementById('email').value,
    phone: document.getElementById('phone').value,
    serviceType: document.querySelector('input[name="serviceType"]:checked')?.value,
    additionalNotes: document.getElementById('additionalNotes').value,
    paymentMethod: 'bank-transfer',
    bankInfo: bankInfo,
    timestamp: new Date().toISOString()
  };
  
  // Store in localStorage (in a real app, this would be sent to your backend)
  localStorage.setItem('bookingData', JSON.stringify(formData));
  
  console.log('Booking data submitted:', formData);
}

function showSuccessModal() {
  const modal = document.getElementById('success-modal');
  modal.classList.remove('hidden');
}

function closeSuccessModal() {
  const modal = document.getElementById('success-modal');
  modal.classList.add('hidden');
  
  // Optionally redirect to a thank you page or reset the form
  // window.location.href = '/';
}

function init() {
  updateServiceDetails();
  
  // Add event listeners
  const contractCheckbox = document.getElementById('contract-agreement');
  contractCheckbox.addEventListener('change', handleContractCheckbox);
  
  const paymentBtn = document.getElementById('payment-btn');
  paymentBtn.addEventListener('click', openPaymentModal);
  
  // Payment method radio buttons
  document.querySelectorAll('input[name="paymentMethodModal"]').forEach(radio => {
    radio.addEventListener('change', handlePaymentMethodChange);
  });
  
  // Global functions for onclick handlers
  window.closePaymentModal = closePaymentModal;
  window.confirmPayment = confirmPayment;
  window.copyToClipboard = copyToClipboard;
  window.closeSuccessModal = closeSuccessModal;
}

function teardown() {
  const contractCheckbox = document.getElementById('contract-agreement');
  if (contractCheckbox) {
    contractCheckbox.removeEventListener('change', handleContractCheckbox);
  }
  
  const paymentBtn = document.getElementById('payment-btn');
  if (paymentBtn) {
    paymentBtn.removeEventListener('click', openPaymentModal);
  }
  
  // Remove global functions
  delete window.closePaymentModal;
  delete window.confirmPayment;
  delete window.copyToClipboard;
  delete window.closeSuccessModal;
}

export { init, teardown };