document.addEventListener("DOMContentLoaded", function () {
  const btn = document.querySelector(".bazi-form button");
  const preview = document.querySelector(".bazi-preview");

  if (btn && preview) {
    btn.addEventListener("click", function () {
      preview.innerHTML = `
        <p class="eyebrow">PROFESSIONAL CHART PREVIEW</p>
        <h3>你的基础命盘已生成</h3>
        <p>当前为演示结果，后续会接入真实八字排盘逻辑。</p>

        <div class="chart-cards">
          <div><span>年柱</span><strong>甲子</strong></div>
          <div><span>月柱</span><strong>乙丑</strong></div>
          <div><span>日柱</span><strong>丙寅</strong></div>
          <div><span>时柱</span><strong>丁卯</strong></div>
        </div>

        <div class="summary-box">
          <h4>命盘核心摘要</h4>
          <p>五行以火木为主，整体表达力较强。适合先建立个人优势，再根据大运流年判断机会窗口。</p>
        </div>

        <div class="next-actions">
          <a href="#paid">根据这个命盘咨询 9.99</a>
          <a href="#paid">生成我的人生预告短片 19.99</a>
        </div>
      `;
    });
  }

  let currentPayType = "";

  const modal = document.createElement("div");
  modal.className = "pay-modal";
  modal.innerHTML = `
    <div class="pay-panel">
      <button class="pay-close" type="button">×</button>
      <p class="eyebrow">PAY CONFIRM</p>
      <h3 id="pay-title">确认支付</h3>
      <strong id="pay-price">0 元</strong>
      <p id="pay-desc">确认后将进入生成流程。</p>
      <button class="pay-confirm" type="button">确认支付并生成</button>
      <button class="pay-cancel" type="button">暂不支付</button>
    </div>
  `;
  document.body.appendChild(modal);

  function openPay(title, price, desc, type) {
    currentPayType = type || "";
    modal.classList.add("show");
    modal.querySelector("#pay-title").textContent = title;
    modal.querySelector("#pay-price").textContent = price;
    modal.querySelector("#pay-desc").textContent = desc;
  }

  window.openZhimingPay = openPay;

  function closePay() {
    modal.classList.remove("show");
  }

  function showResult(type) {
    const old = document.querySelector(".service-result");
    if (old) old.remove();

    const box = document.createElement("div");
    box.className = "service-result";

    if (type === "consult") {
      box.innerHTML = `
        <h3>八字专项咨询已生成</h3>
        <p>当前演示结果：你的命盘更适合先稳定主线，再围绕事业方向做长期规划。短期不宜频繁切换方向，适合把资源集中到一个可持续增长的领域。</p>
      `;
      document.querySelector("#paid").appendChild(box);
    }

    if (type === "life") {
      box.innerHTML = `
        <h3>人生预告短片任务已创建</h3>
        <p>当前演示结果：系统已根据你的八字与经历生成短片任务。正式接入后，这里会显示生成进度、视频预览和下载入口。</p>
      `;
      document.querySelector("#paid").appendChild(box);
    }

    if (type === "face") {
      box.innerHTML = `
        <h3>AI 面相分析已生成</h3>
        <p>当前演示结果：从整体气色、眉眼状态、鼻相轮廓和下巴承载力来看，你的外在气质偏理性谨慎，做事更适合稳扎稳打。正式接入后会返回完整部位拆解报告。</p>
      `;
      document.querySelector("#face").appendChild(box);
    }

    box.scrollIntoView({ behavior: "smooth", block: "center" });
  }

  document.querySelectorAll(".paid-card button").forEach(function (button) {
    button.addEventListener("click", function () {
      const card = button.closest(".paid-card");
      const cardText = card ? card.innerText : button.innerText;
      const textarea = card ? card.querySelector("textarea") : null;
      const value = textarea ? textarea.value.trim() : "";

      if (cardText.includes("9.99") || cardText.includes("八字专项咨询") || cardText.includes("根据八字咨询")) {
        if (!value) {
          alert("请先填写你想咨询的问题，比如事业、财运、感情或未来选择。");
          if (textarea) textarea.focus();
          return;
        }

        openPay(
          "八字专项咨询",
          "9.99 元",
          "本次将根据你的当前命盘和输入的问题，生成一份专项解读。",
          "consult"
        );
        return;
      }

      if (cardText.includes("19.99") || cardText.includes("人生预演") || cardText.includes("人生预告")) {
        if (value.length < 50) {
          alert("请先填写你的真实经历，建议至少 50 字。经历越具体，短片越有专属感。");
          if (textarea) textarea.focus();
          return;
        }

        openPay(
          "人生预演短片",
          "19.99 元",
          "本次将结合你的八字排盘和个人经历，生成一支专属人生预告短片。",
          "life"
        );
        return;
      }
    });
  });

  modal.querySelector(".pay-close").onclick = closePay;
  modal.querySelector(".pay-cancel").onclick = closePay;

  modal.querySelector(".pay-confirm").onclick = function () {
    const confirmBtn = modal.querySelector(".pay-confirm");
    const oldText = confirmBtn.dataset.oldText || confirmBtn.textContent;

    confirmBtn.dataset.oldText = oldText;
    confirmBtn.disabled = true;
    confirmBtn.classList.add("is-loading");
    confirmBtn.textContent = "正在生成中...";

    if (window.showZhimingToast) {
      window.showZhimingToast("支付确认成功，正在生成结果...");
    }

    setTimeout(function () {
      confirmBtn.disabled = false;
      confirmBtn.classList.remove("is-loading");
      confirmBtn.textContent = oldText;

      closePay();

      if (window.addZhimingOrder) {
        window.addZhimingOrder(currentPayType);
      }

      showResult(currentPayType);

      if (window.showZhimingToast) {
        if (currentPayType === "life") {
          window.showZhimingToast("人生预演短片任务已创建，已同步进入订单中心。");
        } else {
          window.showZhimingToast("生成成功，结果已同步进入订单中心。");
        }
      }
    }, 1400);
  };
});