const state = {
  propertyGroupId: null,
  rooms: [],
};

function escapeHtml(s) {
  return String(s)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

function formatDt(iso) {
  return formatUtcDateTime(iso);
}

function defaultStayRange() {
  const start = new Date();
  const end = new Date();
  end.setDate(end.getDate() + 30);
  const fmt = (d) => {
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${y}-${m}-${day}`;
  };
  return { start: fmt(start), end: fmt(end) };
}

function renderRooms() {
  const sel = document.getElementById('resRoomFilter');
  const current = sel.value;
  sel.innerHTML = '<option value="">전체 객실</option>';
  state.rooms.forEach((r) => {
    const opt = document.createElement('option');
    opt.value = r.id;
    opt.textContent = r.display_name;
    sel.appendChild(opt);
  });
  if (current && state.rooms.some((r) => r.id === current)) {
    sel.value = current;
  }
}

function statusBadge(row) {
  if (!row.is_active) {
    return '<span class="res-status-badge res-status-cancelled">취소</span>';
  }
  if (row.masked) {
    return '<span class="res-status-badge res-status-masked">마스킹</span>';
  }
  return '<span class="res-status-badge res-status-active">확정</span>';
}

function smsCell(row) {
  if (!row.needs_check_in_sms) {
    return '<span class="text-slate-500 text-xs">—</span>';
  }
  const checked = row.check_in_sms_sent ? 'checked' : '';
  const sentLabel = row.check_in_sms_sent
    ? `<span class="text-xs text-slate-400 block mt-1">${escapeHtml(formatDt(row.check_in_sms_sent_at))}</span>`
    : '';
  return `
    <label class="res-sms-check inline-flex items-center gap-2 cursor-pointer">
      <input type="checkbox" class="res-sms-toggle rounded" data-slot-id="${escapeHtml(row.slot_id)}" ${checked} />
      <span class="text-xs">발송완료</span>
    </label>${sentLabel}`;
}

function formatStayCell(row) {
  if (row.is_multi_night && row.stay_end_date && row.stay_end_date !== row.stay_date) {
    return `${escapeHtml(row.stay_date)} ~ ${escapeHtml(row.stay_end_date)} <span class="res-night-badge">${row.night_count}박</span>`;
  }
  return escapeHtml(row.stay_date);
}

function renderRows(items, total) {
  const body = document.getElementById('resTableBody');
  const summary = document.getElementById('resSummary');
  if (!items.length) {
    body.innerHTML = '<tr><td colspan="7" class="text-slate-500 text-sm">예약이 없습니다.</td></tr>';
    summary.textContent = '0건';
    return;
  }
  summary.textContent = `${total}건 · 표시 ${items.length}건`;
  body.innerHTML = items.map((row) => {
    const guestCls = row.masked ? ' res-cell-masked' : '';
    return `
      <tr class="${row.is_active ? '' : 'res-row-cancelled'}">
        <td>${formatStayCell(row)}</td>
        <td>${escapeHtml(row.display_name || row.room_name || '—')}</td>
        <td class="font-mono text-xs">${escapeHtml(row.reservation_no || '—')}</td>
        <td class="${guestCls.trim()}">${escapeHtml(row.guest_name || '—')}</td>
        <td class="${guestCls.trim()}">${escapeHtml(row.guest_phone || '—')}</td>
        <td>${statusBadge(row)}</td>
        <td>${smsCell(row)}</td>
      </tr>`;
  }).join('');

  body.querySelectorAll('.res-sms-toggle').forEach((el) => {
    el.addEventListener('change', onSmsToggle);
  });
}

async function onSmsToggle(ev) {
  const input = ev.target;
  const slotId = input.dataset.slotId;
  const sent = input.checked;
  input.disabled = true;
  try {
    await API.patch(`/api/v1/reservation-slots/${slotId}/check-in-sms`, { sent });
    await loadReservations();
  } catch (err) {
    input.checked = !sent;
    alert(`저장 실패: ${err.message}`);
  } finally {
    input.disabled = false;
  }
}

async function loadReservations() {
  if (!state.propertyGroupId) return;
  const params = new URLSearchParams({
    property_group_id: state.propertyGroupId,
    limit: '500',
  });
  const start = document.getElementById('resStayStart').value;
  const end = document.getElementById('resStayEnd').value;
  const roomId = document.getElementById('resRoomFilter').value;
  const guestName = document.getElementById('resGuestName').value.trim();
  const reservationNo = document.getElementById('resReservationNo').value.trim();
  if (start) params.set('stay_start_date', start);
  if (end) params.set('stay_end_date', end);
  if (roomId) params.set('room_mapping_id', roomId);
  if (guestName) params.set('guest_name', guestName);
  if (reservationNo) params.set('reservation_no', reservationNo);
  if (document.getElementById('resIncludeCancelled').checked) {
    params.set('include_cancelled', 'true');
  }
  if (document.getElementById('resSmsPendingOnly').checked) {
    params.set('check_in_sms_pending', 'true');
  }

  const loading = document.getElementById('resLoading');
  loading.classList.remove('hidden');
  try {
    const data = await API.get(`/api/v1/reservation-slots?${params}`);
    renderRows(data.items || [], data.total ?? 0);
  } catch (err) {
    document.getElementById('resTableBody').innerHTML =
      `<tr><td colspan="7" class="text-red-400 text-sm">로드 실패: ${escapeHtml(err.message)}</td></tr>`;
  } finally {
    loading.classList.add('hidden');
  }
}

async function loadRooms() {
  if (!state.propertyGroupId) {
    state.rooms = [];
    renderRooms();
    return;
  }
  state.rooms = await API.get(
    `/api/v1/room-mappings?property_group_id=${state.propertyGroupId}&exposed_only=true`,
  );
  renderRooms();
}

document.getElementById('resRefreshBtn').addEventListener('click', loadReservations);
document.getElementById('resGuestName').addEventListener('keydown', (ev) => {
  if (ev.key === 'Enter') loadReservations();
});
document.getElementById('resReservationNo').addEventListener('keydown', (ev) => {
  if (ev.key === 'Enter') loadReservations();
});

(async function init() {
  if (!requireAuth()) return;
  await applyAdminNav();
  const range = defaultStayRange();
  document.getElementById('resStayStart').value = range.start;
  document.getElementById('resStayEnd').value = range.end;

  try {
    await initCatalogSelectors({
      onPropertyChange: async (propertyGroupId) => {
        state.propertyGroupId = propertyGroupId;
        await loadRooms();
        await loadReservations();
      },
    });
  } catch (err) {
    console.error(err);
  }
})();