/* Combined: AuroraCheckout + MerchantMock — single Babel script tag to share scope */
/* global React */
// AuroraCheckout — reusable Bitcoin/USDT payment modal mock.
// Drop in any merchant mock; pass {amountJpy, merchantName, onClose, onSuccess}.

const { useState: useAuState, useEffect: useAuEffect, useRef: useAuRef, useMemo: useAuMemo } = React;

// ---------- Pricing: snapshot rates (mock) ----------
const RATE_BTC_JPY = 14_820_000;     // 1 BTC in JPY
const RATE_USDT_JPY = 157.4;          // 1 USDT in JPY
const NET_FEE = { ln: 0.001, onchain: 0.004, trc20: 0.003, erc20: 0.006 }; // % included in qty

function fmtJpy(n) { return "¥" + Math.round(n).toLocaleString("ja-JP"); }
function fmtBtc(n) { return n.toFixed(8); }
function fmtUsdt(n) { return n.toFixed(2); }

// ---------- Fake-QR generator (deterministic blocks; visual only) ----------
function FakeQR({ seed = "aurora", size = 200 }) {
  const grid = 25;
  const cells = useAuMemo(() => {
    // tiny deterministic hash → bitmask
    let h = 0;
    for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) | 0;
    const out = [];
    for (let r = 0; r < grid; r++) {
      const row = [];
      for (let c = 0; c < grid; c++) {
        h = (h * 1103515245 + 12345) & 0x7fffffff;
        row.push((h % 100) < 50 ? 1 : 0);
      }
      out.push(row);
    }
    // overlay finder patterns at 3 corners
    const finder = (sr, sc) => {
      for (let r = 0; r < 7; r++) for (let c = 0; c < 7; c++) {
        const onEdge = r === 0 || r === 6 || c === 0 || c === 6;
        const inner = r >= 2 && r <= 4 && c >= 2 && c <= 4;
        out[sr + r][sc + c] = (onEdge || inner) ? 1 : 0;
      }
    };
    finder(0, 0); finder(0, grid - 7); finder(grid - 7, 0);
    return out;
  }, [seed]);

  const cell = size / grid;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
      <rect width={size} height={size} fill="#fff" />
      {cells.map((row, r) => row.map((v, c) => v ? (
        <rect key={r + "-" + c} x={c * cell} y={r * cell} width={cell} height={cell} fill="#1A1814" />
      ) : null))}
    </svg>
  );
}

// ---------- Modal shell ----------
function AuroraCheckout({ open, amountJpy, merchantName, orderRef, onClose, onSuccess }) {
  const [step, setStep] = useAuState(0);          // 0 method · 1 awaiting · 2 received · 3 settled
  const [method, setMethod] = useAuState("ln");
  const [elapsedMs, setElapsedMs] = useAuState(0);
  const timer = useAuRef(null);

  useAuEffect(() => {
    if (!open) { setStep(0); setMethod("ln"); setElapsedMs(0); }
  }, [open]);

  // Step 1 → received → settled. USDT (TRC-20 / ERC-20) totals ~5s to "決済完了" (step 3)
  // to reflect realistic on-chain finality; Bitcoin Lightning stays at the existing pace.
  useAuEffect(() => {
    if (step === 1) {
      const isUsdt = method === "trc20" || method === "erc20";
      const recvDelay = isUsdt ? 5000 : 4000;
      const start = Date.now();
      timer.current = setInterval(() => setElapsedMs(Date.now() - start), 80);
      const t1 = setTimeout(() => setStep(2), recvDelay);
      return () => { clearInterval(timer.current); clearTimeout(t1); };
    }
    if (step === 2) {
      const isUsdt = method === "trc20" || method === "erc20";
      const settleDelay = isUsdt ? 1200 : 1400;
      const t = setTimeout(() => setStep(3), settleDelay);
      return () => clearTimeout(t);
    }
    if (step === 3) {
      const t = setTimeout(() => { onSuccess && onSuccess(); }, 2200);
      return () => clearTimeout(t);
    }
  }, [step]);

  // ---- derived values + memoized invoice — must run before any early return (Rules of Hooks) ----
  const methods = [
    { id: "ln",    label: "Bitcoin",  net: "Lightning Network", icon: "₿", fee: NET_FEE.ln,   speed: "≤ 1秒",   highlight: true },
    { id: "trc20", label: "USDT",     net: "Tron (TRC-20)",     icon: "₮", fee: NET_FEE.trc20,speed: "〜10秒" },
    { id: "onchain", label: "Bitcoin",  net: "On-chain (BTC)",    icon: "₿", fee: NET_FEE.onchain, speed: "〜10分" },
    { id: "erc20", label: "USDT",     net: "Ethereum (ERC-20)", icon: "₮", fee: NET_FEE.erc20, speed: "〜30秒" },
  ];
  const m = methods.find(x => x.id === method);
  const qtyBtc = (amountJpy / RATE_BTC_JPY) * (1 + m.fee);
  const qtyUsdt = (amountJpy / RATE_USDT_JPY) * (1 + m.fee);
  const isBtc = m.id === "ln" || m.id === "onchain";
  const qty = isBtc ? qtyBtc : qtyUsdt;
  const qtyDisplay = isBtc ? fmtBtc(qty) : fmtUsdt(qty);
  const qtyUnit = isBtc ? "BTC" : "USDT";

  const invoiceString = useAuMemo(() => {
    const order = (orderRef || "AU-" + Math.random().toString(36).slice(2, 8).toUpperCase());
    if (m.id === "ln") return `lnbc${Math.round(qty * 1e8)}n1p0aurora${order.toLowerCase()}xyz9q4d8nv2lq6h5cw3hxv7v8m2gpv4q9p7h2`;
    if (m.id === "onchain") return `bc1qaurora${order.toLowerCase()}x4n2vt7gh3kj0w8s9pq6m5z2`;
    if (m.id === "trc20") return `TAuroRa${order}3kPq5N9wXm2bV8sCdRf7HgJpEt`;
    return `0xAur07a${order}3F8d4B9c2E7a1D5c8B3f2A9e6D4c1B8e7F3a`;
  }, [m.id, orderRef, qty]);

  if (!open) return null;

  return (
    <div className="au-modal-backdrop" onClick={e => { if (e.target.classList.contains("au-modal-backdrop")) onClose && onClose(); }}>
      <div className="au-modal">
        <header className="au-modal__header">
          <div className="au-modal__brand">
            <span className="au-modal__brand-mark" aria-hidden="true"></span>
            <div>
              <div className="au-modal__brand-name">aurora <span>by JBI</span></div>
              <div className="au-modal__brand-sub">Bitcoin · USDT 決済</div>
            </div>
          </div>
          <div className="au-modal__meta">
            <span className="au-modal__merchant">{merchantName}</span>
            <button className="au-modal__close" onClick={onClose} aria-label="閉じる">×</button>
          </div>
        </header>

        <div className="au-modal__amountbar">
          <div>
            <div className="au-modal__amountlbl">お支払い金額</div>
            <div className="au-modal__amount">{fmtJpy(amountJpy)}</div>
          </div>
          <div className="au-modal__steps">
            {["方式選択","待機","受信","円着金"].map((label, i) => (
              <div key={i} className={"au-modal__step " + (step >= i ? "is-active " : "") + (step > i ? "is-done" : "")}>
                <span className="au-modal__step-dot"></span>
                <span className="au-modal__step-label">{label}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="au-modal__body">
          {step === 0 && (
            <div className="au-modal__methods">
              <div className="au-modal__methods-head">
                <h3>決済方式を選択</h3>
                <p>Lightning Network 経由のBTCが最も高速・低コストです</p>
              </div>
              <div className="au-modal__method-grid">
                {methods.map(opt => (
                  <button key={opt.id}
                    className={"au-method " + (method === opt.id ? "is-selected" : "")}
                    onClick={() => setMethod(opt.id)}>
                    <span className="au-method__icon">{opt.icon}</span>
                    <span className="au-method__body">
                      <span className="au-method__label">{opt.label} <em>{opt.net}</em></span>
                      <span className="au-method__meta">
                        <span>着金 {opt.speed}</span>
                        <span>fee {(opt.fee * 100).toFixed(2)}%</span>
                      </span>
                    </span>
                    {opt.highlight && <span className="au-method__badge">推奨</span>}
                  </button>
                ))}
              </div>
              <div className="au-modal__methods-foot">
                <div className="au-modal__rate">
                  <span className="au-modal__rate-lbl">参考レート</span>
                  <span className="au-modal__rate-val">1 BTC = {fmtJpy(RATE_BTC_JPY)} · 1 USDT = ¥{RATE_USDT_JPY}</span>
                </div>
                <button className="au-btn au-btn--accent" onClick={() => setStep(1)}>
                  支払いを開始 <span className="au-btn__arrow"></span>
                </button>
              </div>
            </div>
          )}

          {step >= 1 && (
            <div className="au-modal__pay">
              <div className="au-modal__qr-side">
                <div className={"au-modal__qr " + (step >= 2 ? "is-done" : "")}>
                  <FakeQR seed={invoiceString} size={224} />
                  {step >= 2 && (
                    <div className="au-modal__qr-overlay">
                      <svg width="68" height="68" viewBox="0 0 68 68">
                        <circle cx="34" cy="34" r="32" fill="#2F7A4F" />
                        <path d="M18 35 L30 47 L50 22" stroke="#fff" strokeWidth="4.5" fill="none" strokeLinecap="square" strokeLinejoin="miter" />
                      </svg>
                    </div>
                  )}
                </div>
                <div className="au-modal__qr-caption">
                  ウォレットでQRをスキャン<br />
                  <em>または下の {m.id === "ln" ? "invoice" : "アドレス"} をコピー</em>
                </div>
              </div>

              <div className="au-modal__pay-side">
                <div className="au-modal__row">
                  <span className="au-modal__row-lbl">送金額</span>
                  <span className="au-modal__row-val au-mono-big">
                    {qtyDisplay} <em>{qtyUnit}</em>
                  </span>
                </div>
                <div className="au-modal__row">
                  <span className="au-modal__row-lbl">{m.label} / {m.net}</span>
                  <span className="au-modal__row-val au-mono">手数料 {(m.fee * 100).toFixed(2)}%</span>
                </div>

                <div className="au-modal__invoice">
                  <span className="au-modal__row-lbl">{m.id === "ln" ? "Lightning invoice" : "送金先アドレス"}</span>
                  <div className="au-modal__invoice-row">
                    <code>{invoiceString}</code>
                    <button className="au-modal__copy" onClick={() => navigator.clipboard && navigator.clipboard.writeText(invoiceString)}>copy</button>
                  </div>
                </div>

                <div className={"au-modal__status au-modal__status--" + step}>
                  {step === 1 && (
                    <>
                      <span className="au-modal__status-spinner"></span>
                      <span>送金を待機中… <em className="au-mono">{(elapsedMs / 1000).toFixed(1)}s</em></span>
                    </>
                  )}
                  {step === 2 && (
                    <>
                      <span className="au-modal__status-dot is-good"></span>
                      <span>受信確認 · ブロードキャスト確定中…</span>
                    </>
                  )}
                  {step === 3 && (
                    <div className="au-modal__settle">
                      <div className="au-modal__settle-row">
                        <span className="au-modal__status-dot is-good"></span>
                        <span>決済完了 — JPYで貴社口座へ着金しました</span>
                      </div>
                      <div className="au-modal__settle-grid">
                        <div>
                          <div className="au-modal__row-lbl">受領額 (税抜)</div>
                          <div className="au-modal__settle-num">{fmtJpy(amountJpy)}</div>
                        </div>
                        <div>
                          <div className="au-modal__row-lbl">aurora手数料 (0.6%)</div>
                          <div className="au-modal__settle-num au-mono">−{fmtJpy(amountJpy * 0.006)}</div>
                        </div>
                        <div>
                          <div className="au-modal__row-lbl">純着金 (T+0)</div>
                          <div className="au-modal__settle-num au-modal__settle-num--accent">{fmtJpy(amountJpy * 0.994)}</div>
                        </div>
                      </div>
                      <div className="au-modal__txhash">
                        <span className="au-modal__row-lbl">tx hash</span>
                        <code>{invoiceString.slice(0, 18).replace(/[^a-z0-9]/gi, "")}…{invoiceString.slice(-12)}</code>
                      </div>
                    </div>
                  )}
                </div>

                {step === 1 && (
                  <button className="au-modal__back" onClick={() => setStep(0)}>← 方式を変更</button>
                )}
              </div>
            </div>
          )}
        </div>

        <footer className="au-modal__footer">
          <span className="au-mono">aurora · settlement protocol v0.9</span>
          <span>© 2026 日本ビットコイン産業株式会社</span>
        </footer>
      </div>
    </div>
  );
}



/* MerchantMock */
const { useState: useMmState, useEffect: useMmEffect } = React;


function MerchantMock({ config }) {
  const [view, setView] = useMmState("list");        // list | detail | success
  const [selected, setSelected] = useMmState(null);
  const [checkoutOpen, setCheckoutOpen] = useMmState(false);
  const [paid, setPaid] = useMmState(null);          // { product, txTime, methodLabel }

  // Mount class onto body for inherited tokens
  useMmEffect(() => {
    document.body.classList.add("m");
    document.documentElement.style.setProperty("--m-bg", config.colors.bg);
    document.documentElement.style.setProperty("--m-bg-deep", config.colors.bgDeep);
    document.documentElement.style.setProperty("--m-surface", config.colors.surface);
    document.documentElement.style.setProperty("--m-ink", config.colors.ink);
    document.documentElement.style.setProperty("--m-ink-soft", config.colors.inkSoft);
    document.documentElement.style.setProperty("--m-ink-faint", config.colors.inkFaint);
    document.documentElement.style.setProperty("--m-line", config.colors.line);
    document.documentElement.style.setProperty("--m-line-strong", config.colors.lineStrong);
    document.documentElement.style.setProperty("--m-accent", config.colors.accent);
    document.documentElement.style.setProperty("--m-accent-fg", config.colors.accentFg);
    document.documentElement.style.setProperty("--m-tag-bg", config.colors.tagBg);
    if (config.fonts && config.fonts.display) {
      document.documentElement.style.setProperty("--m-display", config.fonts.display);
    }
    if (config.fonts && config.fonts.body) {
      document.documentElement.style.setProperty("--m-body", config.fonts.body);
    }
  }, []);

  const openDetail = (p) => { setSelected(p); setView("detail"); window.scrollTo(0, 0); };
  const backToList = () => { setView("list"); setSelected(null); window.scrollTo(0, 0); };

  const onCheckoutSuccess = () => {
    setCheckoutOpen(false);
    setPaid({ product: selected, txTime: new Date(), methodLabel: "Bitcoin · Lightning Network" });
    setView("success");
  };


  return (
    <>
      {/* Aurora-attribution thin top nav */}
      <div className="m__topnav">
        <div className="m__topnav-inner">
          <a className="back" href="../index.html">← aurora LP に戻る</a>
          <span className="powered">
            powered by <em>aurora</em> · Bitcoin · USDT 決済 demo
          </span>
        </div>
      </div>

      {/* Merchant header */}
      <header className="m__header">
        <div className="m__header-inner">
          <div className="m__brand" onClick={backToList} style={{ cursor: "pointer" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              {config.brand.mark}
              <div>
                <div className="m__brand-name">{config.brand.name}</div>
                <div className="m__brand-tagline">{config.brand.tagline}</div>
              </div>
            </div>
          </div>
          <nav className="m__nav">
            {config.nav.map(label => <a key={label} href="#">{label}</a>)}
            <button className="m__cart-btn">
              CART <span className="m__cart-count">0</span>
            </button>
          </nav>
        </div>
      </header>

      {view === "list" && <ListView config={config} onOpen={openDetail} />}
      {view === "detail" && selected && (
        <DetailView config={config} product={selected} onBack={backToList} onBuy={() => setCheckoutOpen(true)} />
      )}
      {view === "success" && paid && (
        <SuccessOverlay config={config} paid={paid} onClose={backToList} />
      )}

      <AuroraCheckout
        open={checkoutOpen}
        amountJpy={selected ? selected.price : 0}
        merchantName={config.brand.name}
        orderRef={selected ? selected.sku : null}
        onClose={() => setCheckoutOpen(false)}
        onSuccess={onCheckoutSuccess}
      />

      <footer style={{
        marginTop: 40,
        padding: "32px",
        borderTop: "1px solid var(--m-line)",
        background: "var(--m-surface)",
        textAlign: "center",
        fontSize: 11,
        color: "var(--m-ink-faint)",
        fontFamily: "var(--font-mono)",
        letterSpacing: "0.06em",
      }}>
        {config.brand.name} — Aurora決済導入 デモサイト · このサイトはモックです · powered by aurora
      </footer>
    </>
  );
}

/* -------- List view -------- */
function ListView({ config, onOpen }) {
  return (
    <>
      <section className="m__hero">
        <div className="m__hero-inner">
          <div>
            <div className="m__hero-tag">{config.hero.tag}</div>
            <h1 className="m__hero-title">{config.hero.title}</h1>
            <p className="m__hero-sub">{config.hero.sub}</p>
          </div>
          <div className="m__hero-meta">
            {config.hero.meta.map(([k, v, em], i) => (
              <div className="row" key={i}>
                <span>{k}</span>
                <strong>{v}{em && <em> {em}</em>}</strong>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="m__section">
        <div className="m__section-inner">
          <div className="m__section-head">
            <h2 className="m__section-title">{config.gridTitle}</h2>
            <span className="m__section-sub">{config.products.length} ITEMS · UPDATED 2026.05</span>
          </div>
          <div className="m__grid">
            {config.products.map(p => (
              <div className="m__product" key={p.id} onClick={() => onOpen(p)}>
                <div className="m__product__image">{config.renderProductImage(p, "card")}</div>
                <div className="m__product__body">
                  <div className="m__product-meta">
                    <span>{p.brand || p.sku}</span>
                    {p.tag && <span className="m__product-tag">{p.tag}</span>}
                  </div>
                  <h3 className="m__product-name">{p.name}</h3>
                  <p className="m__product-spec">{p.spec}</p>
                  <div className="m__product-price">
                    <span className="jpy">{fmtJpy(p.price)}</span>
                    <span className="btc">≈ {(p.price / 14820000).toFixed(6)} BTC</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* -------- Detail view -------- */
function DetailView({ config, product, onBack, onBuy }) {
  const btcAmt = (product.price / 14820000).toFixed(8);
  const usdtAmt = (product.price / 157.4).toFixed(2);
  return (
    <section className="m__detail">
      <div className="m__detail-inner">
        <div className="m__detail__image">{config.renderProductImage(product, "detail")}</div>
        <div className="m__detail__info">
          <button className="m__detail-back" onClick={onBack}>← 一覧へ戻る</button>
          <div className="m__detail__sku">{product.brand || ""} · SKU {product.sku}</div>
          <h1 className="m__detail__name">{product.name}</h1>
          <p className="m__detail__sub">{product.description || product.spec}</p>

          <div className="m__detail__specs">
            {(product.specs || []).map(([k, v], i) => (
              <div className="row" key={i}><span>{k}</span><span>{v}</span></div>
            ))}
          </div>

          <div className="m__detail__price">
            <span className="jpy">{fmtJpy(product.price)}</span>
            <span className="alt">
              ≈ <strong>{btcAmt}</strong> BTC<br />
              ≈ <strong>{usdtAmt}</strong> USDT
            </span>
          </div>

          <div className="m__detail__actions">
            <button className="m__btn m__btn--aurora" onClick={onBuy}>
              <span className="au-brand__mark"></span>
              <span>aurora で支払う</span>
              <span className="price-after">— Bitcoin · USDT 即時決済</span>
            </button>
            <button className="m__btn m__btn--ghost">クレジットカード / 銀行振込</button>
          </div>

          <div className="m__pay-explainer">
            <span style={{ fontSize: 18 }}>⚡</span>
            <div>
              <strong>aurora決済</strong>を選ぶと、Lightning Network経由のBTCまたはUSDTで即時支払いができます。
              <strong>{config.brand.name}</strong>へはJPYで着金されるため、貴方が暗号資産を保有する必要はありません。
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Success overlay -------- */
function SuccessOverlay({ config, paid, onClose }) {
  const orderId = "ORD-" + Date.now().toString(36).toUpperCase().slice(-6);
  const time = paid.txTime.toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
  return (
    <div className="m__success">
      <div className="m__success__card">
        <div className="m__success__icon">
          <svg width="32" height="32" viewBox="0 0 32 32">
            <path d="M8 16 L14 22 L24 11" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="square" />
          </svg>
        </div>
        <h2>ご注文が確定しました</h2>
        <p>
          <strong>{paid.product.name}</strong> ({fmtJpy(paid.product.price)}) を {paid.methodLabel} で受領しました。<br />
          {config.brand.name} の銀行口座にJPYで着金しています。
        </p>
        <div className="m__success__details">
          <div><div className="lbl">Order ID</div><div className="val">{orderId}</div></div>
          <div><div className="lbl">決済時刻</div><div className="val">{time}</div></div>
          <div><div className="lbl">JPY 着金</div><div className="val" style={{ color: "var(--aurora-live)" }}>{fmtJpy(Math.round(paid.product.price * 0.994))}</div></div>
        </div>
        <p style={{ margin: 0, fontSize: 12, color: "var(--m-ink-faint)" }}>
          確定通知メールを送信しました。発送・配送状況はマイページからご確認ください。
        </p>
        <div className="m__success__hash">
          tx hash · {paid.product.sku.toLowerCase()}-aurora-{Math.random().toString(36).slice(2, 18)}-{Date.now().toString(36)}
        </div>
        <div className="m__success__actions" style={{ marginTop: 28 }}>
          <button className="m__btn m__btn--ghost" style={{ width: "auto", padding: "14px 24px" }} onClick={onClose}>
            ショップへ戻る
          </button>
          <a className="m__btn m__btn--aurora" href="../index.html" style={{ width: "auto", padding: "14px 24px", textDecoration: "none" }}>
            <span>aurora LP に戻る</span>
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MerchantMock });