/* Nút báo lỗi học viên: tạo ticket TesterPortal từ website. */
function CReportBug({ show }) {
  const [open, setOpen] = React.useState(false);
  const [text, setText] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState("");
  if (!show) return null;
  const submit = async (e) => {
    e.preventDefault();
    if (text.trim().length < 8) {
      setMsg("Anh/chị mô tả rõ hơn một chút giúp em nhé.");
      return;
    }
    setBusy(true);
    setMsg("");
    try {
      const body = {
        description: text,
        url: location.href,
        lesson: location.hash || "",
        user_agent: navigator.userAgent,
      };
      const r = await (window.AG && window.AG.reportBug ? window.AG.reportBug(body) : { ok: false });
      if (r && r.ok) {
        setMsg(r.msg || "Đã nhận báo lỗi.");
        setText("");
        setTimeout(() => setOpen(false), 1800);
      } else {
        setMsg((r && r.msg) || "Chưa gửi được, anh/chị thử lại giúp em nhé.");
      }
    } catch (err) {
      setMsg("Kết nối chưa ổn, anh/chị thử lại giúp em nhé.");
    }
    setBusy(false);
  };
  return (
    <>
      <button className="bug-fab" onClick={() => setOpen(true)} title="Báo lỗi học tập">Báo lỗi</button>
      {open && <div className="bug-modal" onClick={() => !busy && setOpen(false)}>
        <form className="bug-box" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
          <button type="button" className="bug-x" onClick={() => setOpen(false)}>×</button>
          <h3>Báo lỗi cho team Sam</h3>
          <p>Gửi lỗi đang gặp trên trang học. Hệ thống sẽ tạo ticket để team kiểm tra và sửa.</p>
          <textarea value={text} onChange={(e) => setText(e.target.value)}
            placeholder="Ví dụ: Em vào bài 2 nhưng video đứng 0:00..." autoFocus />
          {msg && <div className="bug-msg">{msg}</div>}
          <button className="btn btn-accent" disabled={busy} type="submit">
            {busy ? "Đang gửi..." : "Gửi báo lỗi"}
          </button>
        </form>
      </div>}
    </>
  );
}