document.addEventListener('DOMContentLoaded', () => {
  initApp();
});

function initApp() {
  setDefaultDate();
  loadTours();
  setupForm();
}

function setDefaultDate() {
  const dateInput = document.getElementById('travel-date');
  if (dateInput) {
    const today = new Date().toISOString().split('T')[0];
    dateInput.min = today;
    dateInput.value = today;
  }
}

async function loadTours() {
  try {
    const response = await fetch('/api/tours');
    const result = await response.json();
    const tours = Array.isArray(result) ? result : (result.data || []);
    const select = document.getElementById('tour-schedule');
    if (tours.length === 0) {
      addDefaultTours();
      return;
    }
    tours.forEach(tour => {
      const option = document.createElement('option');
      option.value = tour.id;
      option.textContent = tour.name;
      option.dataset.price = tour.price;
      select.appendChild(option);
    });
  } catch (err) {
    console.error('加载线路失败:', err);
    addDefaultTours();
  }
}

function addDefaultTours() {
  const select = document.getElementById('tour-schedule');
  const defaultTours = [
    { id: 't1', name: '慕田峪长城专线巴士-8点出发班', price: 80 },
    { id: 't2', name: '慕田峪长城专线巴士-10点出发班', price: 80 },
    { id: 't3', name: '八达岭长城专线巴士-8点出发班', price: 90 },
    { id: 't4', name: '黄花城长城专线巴士-8点出发班', price: 100 }
  ];
  defaultTours.forEach(tour => {
    const option = document.createElement('option');
    option.value = tour.id;
    option.textContent = tour.name;
    option.dataset.price = tour.price;
    select.appendChild(option);
  });
}

function setupForm() {
  const form = document.getElementById('booking-form');
  form.addEventListener('submit', handleSubmit);
}

async function handleSubmit(e) {
  e.preventDefault();

  const formData = {
    tourId: document.getElementById('tour-schedule').value,
    ticketType: document.getElementById('ticket-type').value,
    travelDate: document.getElementById('travel-date').value,
    adults: parseInt(document.getElementById('adults-count').value),
    children: parseInt(document.getElementById('children-count').value) || 0,
    infants: parseInt(document.getElementById('infants-count').value) || 0,
    name: document.getElementById('user-name').value.trim(),
    phone: document.getElementById('user-phone').value.trim(),
    email: document.getElementById('user-email').value.trim(),
    createTime: new Date().toISOString()
  };

  if (!validateForm(formData)) return;

  const submitBtn = document.querySelector('.submit-btn');
  submitBtn.disabled = true;
  submitBtn.textContent = '预约中...';

  try {
    const response = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });

    const result = await response.json();
    if (result.success) {
      showSuccessModal(result.order);
      form.reset();
      setDefaultDate();
    } else {
      alert('预约失败: ' + (result.message || '未知错误'));
    }
  } catch (err) {
    console.error('提交订单失败:', err);
    alert('网络错误，请稍后重试');
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = '立刻预约';
  }
}

function validateForm(data) {
  if (!data.tourId) {
    alert('请选择线路班次');
    return false;
  }
  if (!data.ticketType) {
    alert('请选择票价类型');
    return false;
  }
  if (!data.travelDate) {
    alert('请选择出行日期');
    return false;
  }
  if (!data.adults || data.adults < 1) {
    alert('请选择成人人数');
    return false;
  }
  if (!data.name) {
    alert('请输入您的姓名');
    return false;
  }
  if (!/^1[3-9][0-9]{9}$/.test(data.phone)) {
    alert('请输入有效的11位手机号码');
    return false;
  }
  if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
    alert('邮箱格式不正确');
    return false;
  }
  return true;
}

function showSuccessModal(order) {
  const modal = document.getElementById('success-modal');
  const message = document.getElementById('success-message');
  message.innerHTML = `预约订单号: <strong>${order.id}</strong><br>我们将尽快与您联系确认`;
  modal.style.display = 'flex';
}

function closeModal() {
  document.getElementById('success-modal').style.display = 'none';
}