import { getConfig } from "../config";
import { createPaymentDialogHost } from "./paymentDialogHost";
import { appendPaymentAmount } from "./paymentAmount";
import { hasEmbedPaymentDialogTarget, delegatePaymentDialog } from "./embedPaymentDialog";

const OVERLAY_ID = "__iscan_payment_alipay_form__";
const dialogHost = createPaymentDialogHost(OVERLAY_ID);

function getStyleConfig(alipayKey, nativeKey, fallback) {
  const value = getConfig(alipayKey);
  if (value) {
    return value;
  }
  const nativeValue = getConfig(nativeKey);
  if (nativeValue) {
    return nativeValue;
  }
  return fallback;
}

function getIframeHeight() {
  const height = getConfig("paymentAlipayFormIframeHeight");
  if (typeof height === "number" && height > 0) {
    return height;
  }
  return 520;
}

function writeHtmlToIframe(iframe, html) {
  const iframeWin = iframe.contentWindow;
  const iframeDoc = iframe.contentDocument || (iframeWin && iframeWin.document);
  if (!iframeDoc) {
    throw new Error("alipay payment iframe document is not available");
  }
  iframeDoc.open();
  iframeDoc.write(html);
  iframeDoc.close();
}

export function closeAlipayPaymentForm() {
  dialogHost.removeOverlay();
}

export function showAlipayPaymentFormLocal(html, amount, currency) {
  if (!html) {
    return Promise.reject(new Error("alipay payment form html is required"));
  }
  if (getConfig("paymentAlipayFormEnabled") === false) {
    return Promise.resolve({ shown: false });
  }

  let paymentIframe;
  try {
    dialogHost.mountOverlay({
      overlayClass: getConfig("paymentAlipayFormOverlayClass") || getConfig("paymentNativeQrOverlayClass"),
      panelClass: getConfig("paymentAlipayFormPanelClass") || getConfig("paymentNativeQrPanelClass"),
      overlayStyle: getStyleConfig(
        "paymentAlipayFormOverlayStyle",
        "paymentNativeQrOverlayStyle",
        undefined
      ),
      panelStyle: getStyleConfig(
        "paymentAlipayFormPanelStyle",
        "paymentNativeQrPanelStyle",
        "position:relative;width:100%;max-width:480px;background:#fff;border-radius:12px;padding:24px 20px 20px;box-shadow:0 8px 28px rgba(0,0,0,0.22);"
      ),
      closeButtonStyle: getStyleConfig(
        "paymentAlipayFormCloseButtonStyle",
        "paymentNativeQrCloseButtonStyle",
        undefined
      ),
      fillPanel(panel) {
        const doc = panel.ownerDocument;

        const title = doc.createElement("h3");
        title.textContent = getConfig("paymentAlipayFormTitle") || "支付宝支付";
        title.style.cssText = "margin:0 0 8px;font-size:18px;font-weight:600;color:#222;line-height:1.35;text-align:center;";

        const message = doc.createElement("p");
        message.textContent = getConfig("paymentAlipayFormMessage") || "请在下方页面完成支付";
        message.style.cssText = "margin:0 0 12px;font-size:14px;color:#666;line-height:1.5;text-align:center;";

        const iframeWrap = doc.createElement("div");
        iframeWrap.style.cssText = "width:100%;overflow:hidden;border:1px solid #eee;border-radius:8px;background:#fff;";

        paymentIframe = doc.createElement("iframe");
        paymentIframe.setAttribute("title", "支付宝支付");
        paymentIframe.style.cssText = `display:block;width:100%;height:${getIframeHeight()}px;border:0;background:#fff;`;

        iframeWrap.appendChild(paymentIframe);
        panel.appendChild(title);
        appendPaymentAmount(panel, doc, amount, currency);
        panel.appendChild(message);
        panel.appendChild(iframeWrap);
      },
    });
  } catch (err) {
    return Promise.reject(err);
  }

  try {
    writeHtmlToIframe(paymentIframe, html);
    return Promise.resolve({ shown: true });
  } catch (err) {
    dialogHost.removeOverlay();
    return Promise.reject(err);
  }
}

export function showAlipayPaymentForm(html, amount, currency) {
  if (hasEmbedPaymentDialogTarget()) {
    const delegated = delegatePaymentDialog("showAlipayPaymentForm", { html, amount, currency });
    if (delegated) {
      return delegated;
    }
  }
  return showAlipayPaymentFormLocal(html, amount, currency);
}