function renderDoctorCard(doctor) {
  const fields = (doctor.fields || []).join("、");
  const card = document.createElement("article");
  card.className = "doctor-card";
  card.setAttribute("role", "button");
  card.setAttribute("tabindex", "0");
  card.dataset.doctorId = doctor.id;

  card.innerHTML = `
    <div class="doctor-card__avatar-wrap">
      <div class="doctor-card__avatar-ring">
        <img class="doctor-card__avatar" src="${escapeHtml(assetUrl(doctor.avatar))}" alt="${escapeHtml(doctor.name)}" loading="lazy" onerror="this.src='${assetUrl('assets/avatars/song.jpg')}'">
      </div>
      <span class="doctor-card__verified" aria-hidden="true">
        <svg viewBox="0 0 12 10" width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 5.2L4.2 8.4L11 1.2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </span>
    </div>
    <div class="doctor-card__body">
      <div class="doctor-card__name-row">
        <span class="doctor-card__name">${escapeHtml(doctor.name)}</span>
        <span class="doctor-card__tag">${escapeHtml(doctor.role || "咨询师")}</span>
      </div>
      <p class="doctor-card__hospital">${escapeHtml(doctor.hospital || "")}</p>
      <p class="doctor-card__fields">
        <span class="doctor-card__fields-label">专业领域</span>${escapeHtml(fields)}
      </p>
    </div>
    <span class="doctor-card__arrow" aria-hidden="true">›</span>
  `;

  card.addEventListener("click", () => goConsult(doctor.id));
  card.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      goConsult(doctor.id);
    }
  });

  return card;
}

function escapeHtml(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

function goConsult(doctorId) {
  const url = doctorId ? `consult.php?doctorId=${encodeURIComponent(doctorId)}` : "consult.php";
  window.location.href = url;
}

async function initHome() {
  const allowed = await initAccessGuard();
  if (!allowed) return;

  try {
    const config = await loadAppConfig();
    document.title = config.siteTitle || "心理咨询";
  } catch (e) {
    console.warn(e);
  }

  const listEl = document.getElementById("doctor-list");
  const ctaBtn = document.getElementById("cta-book");

  try {
    const doctors = await loadDoctors();
    if (doctors.length === 0) {
      listEl.innerHTML = '<p class="doctor-list__empty">暂无咨询师信息</p>';
    } else {
      doctors.forEach((d) => listEl.appendChild(renderDoctorCard(d)));
    }
  } catch (e) {
    listEl.innerHTML = '<p class="doctor-list__empty">加载失败，请刷新重试</p>';
    showToast(e.message || "加载失败");
  }

  ctaBtn.addEventListener("click", () => goConsult());
}

document.addEventListener("DOMContentLoaded", initHome);