/* Thẻ affiliate, Zalo và credit trong profile học viên. */
function ProfileBenefitCards({ data, form, credits, setCredits, go }) {
  const [affIdx, setAffIdx] = React.useState(0);
  const [copied, setCopied] = React.useState(false);
  const [targetCourse, setTargetCourse] = React.useState("N1");
  const [exchange, setExchange] = React.useState({ accept: false, quote: null, msg: "" });
  const aff = (data && data.affiliate) || {};
  const z = (data && data.zalo) || {};
  const links = aff.course_links || [];
  const currentAffLink = () => (links[affIdx] && links[affIdx].link) || aff.link || "";
  const copyAffiliate = () => {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1500); };
    try { navigator.clipboard.writeText(currentAffLink()).then(done).catch(done); } catch (e) { done(); }
  };
  const quoteExchange = async () => {
    const r = await (window.AG && AG.exchangeQuote ? AG.exchangeQuote(targetCourse) : { ok: false });
    setExchange(Object.assign({}, exchange, { quote: r, msg: r.ok ? "Đã tính phần cần bù." : (r.msg || "Chưa tính được.") }));
  };
  const redeemExchange = async () => {
    const r = await (window.AG && AG.exchangeRedeem ? AG.exchangeRedeem({ target_course: targetCourse,
      accept_no_refund: exchange.accept, idempotency_key: "ui-" + targetCourse + "-" + Date.now() }) : { ok: false });
    setExchange(Object.assign({}, exchange, { msg: r.msg || (r.ok ? "Đã gửi yêu cầu đổi." : "Chưa gửi được.") }));
    if (r.ok && AG.credits) AG.credits().then(setCredits).catch(() => {});
  };
  return <div className="profile-grid">
    <div className="profile-card">
      <h3>Zalo hỗ trợ</h3>
      <p><b>Tên Zalo:</b> {z.sender_name || form.zalo_name || "Chưa xác nhận"}</p>
      <p><b>Số Zalo:</b> {form.zalo_phone || "Chưa nhập"}</p>
      <p><b>Group:</b> {z.group_name || "Chưa liên kết group"}</p>
      <p><b>Mã xác nhận:</b> {z.code || "Bấm lưu hồ sơ hoặc mở mục Zalo để lấy mã"}</p>
      <button className="btn btn-outline" onClick={() => go && go("learn")}>Mở hướng dẫn trong trang học</button>
    </div>
    <div className="profile-card affiliate-profile-card">
      <h3>Giới thiệu học viên</h3>
      <p><b>Mã:</b> <span className="aff-code">{aff.code || "Đang tạo"}</span></p>
      <p><b>Mức:</b> {aff.rate || 20}% · {aff.tier || "Khởi động"}</p>
      <p><b>Doanh số:</b> {scFmtMoney(aff.revenue)} · <b>Hoa hồng:</b> {scFmtMoney(aff.commission)}</p>
      {links.length > 0 && <label className="aff-course-picker">Chọn khóa muốn giới thiệu
        <select value={affIdx} onChange={(e) => setAffIdx(Number(e.target.value || 0))}>
          {links.map((it, i) => <option key={it.course || i} value={i}>{it.name}</option>)}
        </select>
      </label>}
      <div className="aff-link-row"><input readOnly value={currentAffLink()} onFocus={(e) => e.target.select()} />
        <button className="btn btn-accent" type="button" onClick={copyAffiliate}>{copied ? "Đã copy" : "Copy"}</button></div>
      <div className="aff-guide-box">
        <div><b>Cẩm nang chia sẻ tinh tế</b><span>Đọc 5 phút để nói đúng giá trị DeChePro, nhận diện bạn bè phù hợp và hỗ trợ đúng lúc.</span></div>
        <a className="aff-guide-link" href="/agent/app/affiliate-proposal.html?v=profile" target="_blank" rel="noopener noreferrer">Xem cẩm nang ↗</a>
      </div>
    </div>
    <div className="profile-card affiliate-profile-card">
      <h3>Credit đổi khóa</h3>
      <p><b>Số dư:</b> {scFmtMoney((credits && credits.balance) || 0)} credit</p>
      <label className="aff-course-picker">Chọn khóa muốn đổi
        <select value={targetCourse} onChange={(e) => setTargetCourse(e.target.value)}>
          {links.filter((x) => x.course !== "DeChe").map((it) => <option key={it.course} value={it.course}>{it.name}</option>)}
        </select>
      </label>
      {exchange.quote && exchange.quote.ok && <p><b>Cần bù:</b> {scFmtMoney(exchange.quote.cash_due)} · <b>Dùng:</b> {scFmtMoney(exchange.quote.credits_applied)}</p>}
      <label className="profile-check"><input type="checkbox" checked={exchange.accept} onChange={(e) => setExchange(Object.assign({}, exchange, { accept: e.target.checked }))} /> Tôi đồng ý chính sách mua khóa không hoàn tiền.</label>
      <div className="aff-link-row"><button className="btn btn-outline" type="button" onClick={quoteExchange}>Tính credit</button><button className="btn btn-accent" type="button" onClick={redeemExchange}>Gửi yêu cầu</button></div>
      {exchange.msg && <p className="tiny">{exchange.msg}</p>}
    </div>
  </div>;
}

Object.assign(window, { ProfileBenefitCards });