// Airstep — Stitch BNPL instalment messaging widget
// ---------------------------------------------------------------------------
// Renders the "From R… over 6 interest-free payments" message below product
// prices, per the Stitch BNPL merchant guide. Two modes:
//
//   • Native (default)  — an on-brand instalment line that always renders, so
//                         the messaging is visible on the live site and in
//                         preview. Maths: price / installments, en-ZA format.
//   • Official drop-in  — set AIRSTEP_STORE.stitchBnpl.useOfficialWidget = true
//                         to load Stitch's hosted widget (express.stitch.money)
//                         for production. It self-renders the branded widget.
//
// The actual BNPL *payment option* appears automatically in the Stitch hosted
// checkout once you toggle Stitch BNPL on in your Stitch Express dashboard —
// no extra code is required for the payment itself.
// ---------------------------------------------------------------------------

const _bnplCfg = (window.AIRSTEP_STORE && window.AIRSTEP_STORE.stitchBnpl) || {};
const BNPL = {
  enabled: _bnplCfg.enabled !== false,
  installments: _bnplCfg.installments || 6,
  minimumAmount: _bnplCfg.minimumAmount || 100,
  useOfficialWidget: !!_bnplCfg.useOfficialWidget,
};

const bnplMonthly = (price) =>
  "R" + (price / BNPL.installments).toLocaleString("en-ZA", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

// Brand wordmark (text lockup in Stitch violet). For production you can switch
// to Stitch's official drop-in widget, which renders the supplied logo files.
const StitchBnplMark = ({ tone = "violet" }) => (
  <span className={`bnpl-mark bnpl-mark--${tone}`}>Stitch&nbsp;BNPL</span>
);

const BnplWidget = ({ price, tone = "light", className = "" }) => {
  const ref = React.useRef(null);

  // Official Stitch drop-in widget (production)
  React.useEffect(() => {
    if (!BNPL.enabled || !BNPL.useOfficialWidget || !price) return;
    window.StitchBNPLConfig = {
      mountSelector: "#stitch-bnpl-widget",
      price,
      minimumAmount: BNPL.minimumAmount,
      installments: BNPL.installments,
      logoBg: "purple",
      width: "100%",
      locale: "en-ZA",
      currency: "ZAR",
    };
    if (!document.getElementById("stitch-bnpl-script")) {
      const s = document.createElement("script");
      s.id = "stitch-bnpl-script";
      s.src = "https://express.stitch.money/js/bnpl-widget.v1.js";
      document.body.appendChild(s);
    } else if (window.StitchBNPL && window.StitchBNPL.setPrice) {
      window.StitchBNPL.setPrice(price);
    }
  }, [price]);

  if (!BNPL.enabled || !price || price < BNPL.minimumAmount) return null;

  if (BNPL.useOfficialWidget) {
    return <div id="stitch-bnpl-widget" ref={ref} className={`bnpl-official ${className}`}/>;
  }

  return (
    <div className={`bnpl bnpl--${tone} ${className}`}>
      <StitchBnplMark tone={tone === "dark" ? "white" : "violet"}/>
      <span className="bnpl-text">
        From <strong>{bnplMonthly(price)}</strong> over {BNPL.installments} interest-free payments.
      </span>
    </div>
  );
};

Object.assign(window, { BNPL, BnplWidget, StitchBnplMark });