const { useState: buyState, useEffect: buyEffect } = React;
const ZALO_BUY = "0915849968";

function vnd(n) {
  return Number(n || 0).toLocaleString("vi-VN") + "đ";
}

function initialAffiliateCode() {
  const params = new URLSearchParams(location.search);
  const fromUrl = params.get("ref") || params.get("aff") || params.get("r") || params.get("ctv") || "";
  if (fromUrl) localStorage.setItem("deche_affiliate", fromUrl);
  return fromUrl || localStorage.getItem("deche_affiliate") || "";
}

function zaloHref(phone, quote, affiliate) {
  const lines = ["Đăng ký Lớp PRO + Họ tên", phone ? "SĐT: " + phone : ""];
  if (quote && quote.old_student && quote.old_student.eligible) {
    lines.push("Tôi là học viên cũ của Sam, xin áp dụng ưu đãi 20%.");
  }
  if (affiliate) lines.push("Mã CTV: " + affiliate);
  return "https://zalo.me/" + ZALO_BUY + "?text=" + encodeURIComponent(lines.filter(Boolean).join("\n"));
}

function OfferBox({ quote }) {
  if (!quote) return <div className="tiny muted">Nhập SĐT để kiểm tra ưu đãi học viên cũ.</div>;
  const aff = quote.affiliate || {};
  return (
    <div className="card mt" style={{ background: "var(--paper)" }}>
      <div className="row" style={{ justifyContent: "space-between" }}>
        <span className="muted">Học phí niêm yết</span><b>{vnd(quote.base_price)}</b>
      </div>
      {quote.discount_amount > 0 && <div className="row" style={{ justifyContent: "space-between" }}>
        <span className="muted">Ưu đãi học viên cũ</span><b>-{vnd(quote.discount_amount)}</b>
      </div>}
      <div className="row" style={{ justifyContent: "space-between" }}>
        <span className="muted">Tạm tính cần xác nhận</span><b>{vnd(quote.final_price)}</b>
      </div>
      {aff.code && <div className="tiny muted mt" style={{ marginTop: 8 }}>
        {aff.valid ? `CTV ${aff.code}: hoa hồng ${aff.rate}% tính trên số thực trả (${vnd(aff.commission_amount)}).`
          : aff.reason === "self_referral" ? "Mã CTV không áp dụng cho chính chủ mã."
          : "Mã CTV sẽ được team kiểm tra lại khi xác nhận."}
      </div>}
    </div>
  );
}

function BuyModal({ price, onClose }) {
  const [phone, setPhone] = buyState("");
  const [affiliate, setAffiliate] = buyState(initialAffiliateCode());
  const [quote, setQuote] = buyState(null);
  const [acceptNoRefund, setAcceptNoRefund] = buyState(false);
  buyEffect(() => {
    let alive = true;
    if (!phone.trim() && !affiliate.trim()) { setQuote(null); return () => {}; }
    AG.offer({ phone, affiliate }).then((r) => alive && setQuote(r)).catch(() => alive && setQuote(null));
    return () => { alive = false; };
  }, [phone, affiliate]);
  const shown = quote || { base_price: price, final_price: price, discount_amount: 0 };
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="spread">
          <h3 className="h3">Đăng ký Lớp Chuyên Sâu</h3>
          <button className="btn" onClick={onClose}>✕</button>
        </div>
        <div className="pill-price mt" style={{ alignItems: "flex-start" }}>
          <span className="tiny">Học phí sau ưu đãi nếu đủ điều kiện</span><b>{vnd(shown.final_price)}</b>
        </div>
        <div className="row mt">
          <div><label className="tiny">SĐT kiểm tra học viên cũ</label><input className="lg-inp" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="0905..." /></div>
          <div><label className="tiny">Mã CTV (nếu có)</label><input className="lg-inp" value={affiliate} onChange={(e) => setAffiliate(e.target.value)} placeholder="SAM-ABC123" /></div>
        </div>
        <OfferBox quote={quote} />
        <ol className="small mt" style={{ color: "var(--ink-soft)", paddingLeft: 18, lineHeight: 1.7 }}>
          <li>Học viên cũ của Sam được giảm theo bậc Affiliate của chính mình: <b>20%</b>, <b>25%</b> hoặc <b>30%</b>.</li>
          <li>Mã CTV áp chính sách affiliate trọn đời: 20%, lên 25% từ 30 triệu và 30% từ 60 triệu doanh số xác nhận.</li>
          <li>Toàn bộ khóa học áp dụng no-refund: khi xác nhận mua là bạn đã đọc kỹ và đồng ý không hoàn tiền với bất kỳ lý do nào.</li>
          <li>Sau xác nhận, bạn được cấp tài khoản trên dechemotnguoi.com và vào học tại đây.</li>
        </ol>
        <label className="profile-check"><input type="checkbox" checked={acceptNoRefund} onChange={(e) => setAcceptNoRefund(e.target.checked)} /> Tôi đã đọc kỹ và đồng ý mua khóa là không hoàn tiền với bất kỳ lý do nào.</label>
        <div className="row mt">
          <a className="btn btn-accent" href={acceptNoRefund ? zaloHref(phone, quote, affiliate) : undefined} onClick={(e) => { if (!acceptNoRefund) e.preventDefault(); }} target="_blank">Nhắn Zalo {ZALO_BUY} →</a>
          <a className="btn btn-outline" href="https://dechemotnguoi.com" target="_blank">Đã có tài khoản? Đăng nhập</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BuyModal });