const forms = document.querySelectorAll('.booking-form');
const navToggle = document.querySelector('[data-nav-toggle]');
const navMenu = document.querySelector('[data-nav-menu]');
const navLinks = document.querySelectorAll('.site-nav-public a');

const formatCurrency = (cents) =>
  new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
  }).format(cents / 100);

const calculateRentalDays = (start, end) => {
  if (!start || !end) return null;

  const startDate = new Date(start);
  const endDate = new Date(end);

  if (Number.isNaN(startDate.valueOf()) || Number.isNaN(endDate.valueOf())) {
    return null;
  }

  const milliseconds = endDate.getTime() - startDate.getTime();
  const rentalDays = Math.floor(milliseconds / 86400000);

  return rentalDays > 0 ? rentalDays : null;
};

forms.forEach((form) => {
  const startInput = form.querySelector('[data-booking-start]');
  const endInput = form.querySelector('[data-booking-end]');
  const daysOutput = form.querySelector('[data-summary-days]');
  const rateOutput = form.querySelector('[data-summary-rate]');
  const totalOutput = form.querySelector('[data-summary-total]');
  const rateInput = form.querySelector('input[name="price_per_day_cents"]');
  const deliveryModeInput = form.querySelector('[data-delivery-mode]');
  const deliveryZoneInput = form.querySelector('[data-delivery-zone]');
  const defaultRate = Number(form.dataset.dayRate || rateInput?.value || 9999);
  const priceRates = (() => {
    try {
      return JSON.parse(form.dataset.priceRates || '{}');
    } catch {
      return {};
    }
  })();

  const resolveRate = () => {
    if (deliveryModeInput?.value === 'self_pickup') {
      return Number(priceRates.self_pickup || defaultRate);
    }

    return Number(priceRates[deliveryZoneInput?.value || ''] || defaultRate);
  };

  const syncRate = () => {
    if (deliveryZoneInput) {
      if (deliveryModeInput?.value === 'self_pickup') {
        deliveryZoneInput.value = 'self_pickup';
      } else if (deliveryZoneInput.value === 'self_pickup') {
        deliveryZoneInput.value = 'hannover';
      }
    }

    const rate = resolveRate();

    if (rateInput) {
      rateInput.value = String(rate);
    }

    return rate;
  };

  const render = () => {
    const rentalDays = calculateRentalDays(startInput?.value, endInput?.value);
    const rate = syncRate();

    if (!rentalDays || rate < 0) {
      if (daysOutput) daysOutput.textContent = 'Noch nicht gewählt';
      if (rateOutput) rateOutput.textContent = formatCurrency(rate);
      if (totalOutput) totalOutput.textContent = formatCurrency(rate);
      return;
    }

    if (daysOutput) {
      daysOutput.textContent = `${rentalDays} ${rentalDays === 1 ? 'Miettag' : 'Miettage'}`;
    }

    if (rateOutput) {
      rateOutput.textContent = formatCurrency(rate);
    }

    if (totalOutput) {
      totalOutput.textContent = formatCurrency(rentalDays * rate);
    }
  };

  startInput?.addEventListener('input', render);
  endInput?.addEventListener('input', render);
  rateInput?.addEventListener('input', render);
  deliveryModeInput?.addEventListener('change', render);
  deliveryZoneInput?.addEventListener('change', render);
  render();
});

if (navToggle && navMenu) {
  const closeMenu = () => {
    navToggle.setAttribute('aria-expanded', 'false');
    navMenu.classList.remove('is-open');
  };

  navToggle.addEventListener('click', () => {
    const isOpen = navMenu.classList.toggle('is-open');
    navToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  });

  navLinks.forEach((link) => {
    link.addEventListener('click', closeMenu);
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      closeMenu();
    }
  });
}