/* Survey sau học phần: học viên/agent gửi feedback, nhận sitemap để ôn lại đúng bài. */
(function () {
  function ModuleFeedbackPanel({ moduleData, visible }) {
    const R = React;
    const [rating, setRating] = R.useState(5);
    const [clarity, setClarity] = R.useState(5);
    const [support, setSupport] = R.useState(false);
    const [stuck, setStuck] = R.useState([]);
    const [text, setText] = R.useState("");
    const [sent, setSent] = R.useState(false);
    const [busy, setBusy] = R.useState(false);
    if (!visible || !moduleData) return null;
    const scope = () => {
      const raw = (localStorage.getItem("ag_token") || localStorage.getItem("token") || "anon").slice(-24);
      let h = 0; for (let i = 0; i < raw.length; i += 1) h = ((h << 5) - h + raw.charCodeAt(i)) | 0;
      return String(Math.abs(h));
    };
    const key = "module_feedback_" + moduleData.id + "_" + scope();
    if (!sent && localStorage.getItem(key) === "1") return null;
    const lessons = moduleData.lessons || [];
    const toggle = (no) => setStuck((a) => a.indexOf(no) >= 0 ? a.filter((x) => x !== no) : a.concat([no]));
    const payload = () => ({
      module_id: moduleData.id, rating, clarity, stuck_lessons: stuck,
      support_needed: support, feedback: text,
      agent_summary: "Học viên phản hồi sau học phần " + moduleData.name
    });
    const submit = async () => {
      setBusy(true);
      try {
        const res = await (window.AG && window.AG.moduleFeedback ? window.AG.moduleFeedback(payload()) : Promise.resolve({ ok: false }));
        if (res && res.ok) { localStorage.setItem(key, "1"); setSent(true); }
        else if (window.showToast) window.showToast((res && res.msg) || "Chưa gửi được feedback, thử lại sau.");
      } catch (e) {
        if (window.showToast) window.showToast("Mạng đang lỗi, feedback chưa gửi. Bạn thử lại sau nhé.");
      } finally {
        setBusy(false);
      }
    };
    const agentPrompt = () => {
      const map = lessons.map((l) => "- Bài " + l.no + ": " + l.title + " — " + l.url).join("\n");
      return "Bạn là AI Agent học viên. Hãy hỏi tôi feedback sau học phần '" + moduleData.name + "': mức hiểu 1-5, chỗ kẹt, cần hỗ trợ gì. Nếu tôi kẹt, mở đúng link trong sitemap này để tôi xem lại:\n" + map + "\nSau đó gửi feedback về /agent/api/module-feedback bằng token học viên.";
    };
    const copyPrompt = () => {
      try { navigator.clipboard.writeText(agentPrompt()); } catch (e) {}
      if (window.showToast) window.showToast("Đã copy prompt feedback cho AI Agent.");
    };
    if (sent) return <div className="bai-card done" style={{ padding: 18 }}>✓ Em đã nhận feedback học phần này. Cảm ơn bạn đã giúp team hỗ trợ tốt hơn.</div>;
    return <div className="bai-card open" style={{ borderColor: "#C99A4E", padding: 18 }}>
      <div className="label" style={{ color: "var(--accent)", marginBottom: 6 }}>Khảo sát sau học phần</div>
      <div className="bai-title" style={{ marginBottom: 6 }}>Bạn học phần “{moduleData.name}” thế nào?</div>
      <div className="muc-sub" style={{ marginBottom: 14 }}>Gửi 30 giây feedback để team hiểu bạn đang kẹt ở đâu. Agent của bạn cũng có thể dùng sitemap để mở lại đúng bài.</div>
      <div style={{ display: "grid", gap: 12 }}>
        <label>Hiểu bài: <b>{clarity}/5</b><input type="range" min="1" max="5" value={clarity} onChange={(e) => setClarity(+e.target.value)} style={{ width: "100%" }} /></label>
        <label>Mức hài lòng: <b>{rating}/5</b><input type="range" min="1" max="5" value={rating} onChange={(e) => setRating(+e.target.value)} style={{ width: "100%" }} /></label>
        <div>
          <div style={{ fontWeight: 700, marginBottom: 6 }}>Bạn còn kẹt bài nào?</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {lessons.map((l) => <button key={l.no} className="btn btn-outline" style={{ padding: "6px 10px", borderColor: stuck.indexOf(l.no) >= 0 ? "#C99A4E" : "var(--line)" }} onClick={() => toggle(l.no)}>Bài {l.no}</button>)}
          </div>
        </div>
        <label style={{ display: "flex", gap: 8, alignItems: "center" }}><input type="checkbox" checked={support} onChange={(e) => setSupport(e.target.checked)} /> Em cần team hỗ trợ thêm</label>
        <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="Ghi ngắn: chỗ nào khó hiểu, cần thêm ví dụ gì, agent hỗ trợ chưa đúng ở đâu..." style={{ minHeight: 96, border: "1px solid var(--line)", borderRadius: 10, padding: 12, font: "inherit" }} />
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <button className="btn btn-accent" disabled={busy} onClick={submit}>{busy ? "Đang gửi..." : "Gửi feedback"}</button>
          <button className="btn btn-outline" onClick={copyPrompt}>Copy prompt cho AI Agent</button>
        </div>
      </div>
    </div>;
  }
  window.ModuleFeedbackPanel = ModuleFeedbackPanel;
})();