/* ============================================================================
 * 서명전에 — iOS Billing sheet (앱인토스 IAP 인앱결제)
 *
 * 백엔드 상품 3종(app/toss_payments.py)과 완벽히 동기화:
 *   - single_text : ₩990   · 텍스트 계약서 1회
 *   - single_ocr  : ₩1,990 · 사진(OCR) 계약서 1회 (2크레딧 차감)
 *   - pack        : ₩5,900 · 계약서 6회권
 *
 * 결제 버튼을 누르면 상위 `onPurchase(plan)` 콜백이 (Task #197, 2026-04-24):
 *   1) TossAdapter.iap.purchase({ productId })
 *        → Toss SDK 가 결제 UI 표시 → { orderId, receipt, productId } 반환
 *   2) POST /payments/iap/confirm { product_id, order_id, receipt, amount }
 *        → 백엔드가 mTLS 로 영수증 검증 후 크레딧 지급
 * 을 돌리고 { ok, message, creditsAdded, idempotent } 를 돌려준다.
 *
 * 콘솔 등록 전엔 useAuth().iapProductId* 가 null 이라 onPurchase 가
 * "결제 준비 중" 메시지를 돌려준다 — 그 메시지를 그대로 시트 배너에 띄운다.
 * ========================================================================== */

function BillingSheet({ onPurchase, onClose }) {
  // IAP 상품 ID 매핑 — 콘솔 등록 전엔 null (결제 버튼 비활성화 목적).
  const auth = (typeof useAuth === "function") ? useAuth() : null;
  const iapReady = !!(
    auth?.iapProductIdSingleText ||
    auth?.iapProductIdSingleOcr ||
    auth?.iapProductIdPack
  );
  const [sel, setSel] = useState("pack");
  const [busy, setBusy] = useState(false);
  // status: null | { kind: 'ok'|'err', message: string }
  const [status, setStatus] = useState(null);

  const plans = [
    {
      kind: "single_text",
      title: "텍스트 1회",
      sub: "카톡·문자로 받은 본문 분석",
      price: 990,
      credits: 1,
    },
    {
      kind: "single_ocr",
      title: "사진 1회",
      sub: "사진·PDF 계약서 (OCR)",
      price: 1990,
      credits: 2,
    },
    {
      kind: "pack",
      title: "6회권",
      sub: "건당 ₩983 · 가장 아끼는 선택",
      price: 5900,
      credits: 6,
      highlight: true,
    },
  ];

  const current = plans.find((p) => p.kind === sel) || plans[0];

  async function handlePurchase() {
    if (busy) return;
    setStatus(null);
    setBusy(true);
    try {
      const res = await onPurchase?.(current);
      if (res && res.ok) {
        setStatus({ kind: "ok", message: `${res.creditsAdded || current.credits}회 충전 완료!` });
        // 성공시 짧게 보여주고 시트 닫기
        setTimeout(() => { onClose?.(); }, 900);
      } else {
        setStatus({
          kind: "err",
          message: (res && res.message) || "결제가 완료되지 않았어요. 잠시 후 다시 시도해 주세요.",
        });
      }
    } catch (err) {
      setStatus({ kind: "err", message: err?.message || "결제 중 오류가 발생했어요." });
    } finally {
      setBusy(false);
    }
  }

  return (
    <div style={{ padding: "0 0 8px" }}>
      <div style={{
        padding: "0 4px 14px",
        fontSize: 15,
        color: "var(--label-secondary)",
        opacity: 0.8,
        lineHeight: 1.45,
        textWrap: "pretty",
      }}>
        텍스트 분석은 1회, 사진(OCR) 분석은 2회 크레딧이 차감돼요. 남은 크레딧은 만료 없이 계속 쓸 수 있어요.
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 18 }}>
        {plans.map((p) => {
          const active = sel === p.kind;
          return (
            <button
              key={p.kind}
              onClick={() => setSel(p.kind)}
              disabled={busy}
              style={{
                border: 0,
                textAlign: "left",
                borderRadius: 14,
                padding: 16,
                background: active ? "var(--brand-soft)" : "var(--bg-2)",
                boxShadow: active ? "inset 0 0 0 2px var(--brand)" : "inset 0 0 0 1px var(--separator)",
                cursor: busy ? "not-allowed" : "pointer",
                opacity: busy ? 0.6 : 1,
                fontFamily: "inherit",
                color: "var(--label)",
                display: "flex",
                alignItems: "center",
                gap: 12,
                position: "relative",
              }}
            >
              <span style={{
                width: 22, height: 22, borderRadius: 11,
                border: active ? "6.5px solid var(--brand)" : "1.5px solid var(--label-secondary)",
                boxSizing: "border-box",
                flexShrink: 0,
                transition: "all 150ms",
                opacity: active ? 1 : 0.4,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{
                  display: "flex", alignItems: "center", gap: 8, marginBottom: 2,
                }}>
                  <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.015em" }}>
                    {p.title}
                  </span>
                  {p.highlight && (
                    <span style={{
                      fontSize: 11,
                      padding: "2px 7px",
                      borderRadius: 999,
                      background: "var(--brand)",
                      color: "#fff",
                      fontWeight: 600,
                    }}>
                      가장 인기
                    </span>
                  )}
                </div>
                <span style={{
                  fontSize: 13,
                  color: "var(--label-secondary)",
                  opacity: 0.75,
                }}>
                  {p.sub}
                </span>
              </div>
              <span style={{
                fontFamily: "var(--font-rounded)",
                display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 1,
              }} className="tnum">
                <span style={{
                  fontWeight: 700,
                  fontSize: 20,
                  letterSpacing: "-0.02em",
                  color: "var(--label)",
                }}>
                  ₩{p.price.toLocaleString()}
                </span>
                <span style={{
                  fontSize: 12, fontWeight: 500,
                  color: "var(--label-secondary)",
                  opacity: 0.7,
                }}>
                  +{p.credits}회
                </span>
              </span>
            </button>
          );
        })}
      </div>

      {status && (
        <div style={{
          padding: "12px 14px",
          borderRadius: 12,
          marginBottom: 14,
          background: status.kind === "ok" ? "var(--safe-soft, #f0faf6)" : "var(--alert-soft, #ffeeee)",
          color: status.kind === "ok" ? "var(--safe-ink, #029359)" : "var(--alert-ink, #d22030)",
          fontSize: 13, lineHeight: 1.45,
          display: "flex", gap: 10, alignItems: "flex-start",
        }}>
          <IOSIcon name={status.kind === "ok" ? "check" : "info"} size={16} />
          <span>{status.message}</span>
        </div>
      )}

      <div style={{
        background: "var(--fill-3)",
        borderRadius: 12,
        padding: "12px 14px",
        fontSize: 13,
        color: "var(--label-secondary)",
        lineHeight: 1.45,
        display: "flex",
        alignItems: "flex-start",
        gap: 10,
        marginBottom: 18,
      }}>
        <IOSIcon name="shield-check" size={16} />
        <span>토스 앱 인앱결제로 안전하게 진행돼요. 영수증은 토스 앱 내역에서 확인할 수 있어요.</span>
      </div>

      <button
        className="btn btn--filled btn--large btn--block"
        onClick={handlePurchase}
        disabled={busy || !iapReady}
        style={{ display: "flex", gap: 6, opacity: (busy || !iapReady) ? 0.7 : 1 }}
      >
        <IOSIcon name="lock" size={16} />
        {busy
          ? "결제 처리 중…"
          : !iapReady
            ? "결제 준비 중이에요"
            : `${current.price.toLocaleString()}원 결제하기`}
      </button>
    </div>
  );
}

window.BillingSheet = BillingSheet;

Object.assign(window, { BillingSheet });