/* Zalo link panel: xác nhận group Zalo để team nhận đúng học viên. */
function ZaloLinkPanel() {
  const [d, setD] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const groups = [
    ["K63", "https://zalo.me/g/wazrgefbupaocarhoj4f"],
    ["K64", "https://zalo.me/g/cyga9p8tbhrvvie4yrht"],
    ["K65", "https://zalo.me/g/k1k3aztps9s3udrbmw6l"],
    ["K66", "https://zalo.me/g/qltnnzt1lcrg26gpx3v3"],
    ["K67", "https://zalo.me/g/td0ekiwpwhzsi5tu7rer"]
  ];
  const groupKey = (name) => {
    const m = String(name || "").match(/\bK(6[3-7])\b/i);
    return m ? ("K" + m[1]) : "";
  };
  const load = async () => {
    if (!window.AG || !window.AG.zaloLink || (window.AG.hasToken && !window.AG.hasToken())) return;
    setBusy(true);
    try { setD(await window.AG.zaloLink()); } catch (e) { setD({ ok: false }); }
    setBusy(false);
  };
  React.useEffect(() => { load(); }, []);
  const msg = d && d.message;
  const copy = () => {
    try { navigator.clipboard.writeText(msg || ""); } catch (e) {}
    if (window.showToast) window.showToast("Đã copy câu xác nhận. Dán vào đúng group hỗ trợ nhé.");
  };
  if (!d || !d.ok) return null;
  const linked = d.status === "linked";
  const ready = d.status === "profile_ready";
  const suggested = groups.find((g) => g[0] === groupKey(d.group_name));
  const rest = groups.filter((g) => !suggested || g[0] !== suggested[0]);
  return (
    <section style={{ paddingBottom: "clamp(10px,1.5vw,18px)" }}><div className="wrap-wide">
      <div className={"zalo-link-card" + (linked ? " linked" : "")}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontWeight: 800, color: "#0d1f33", marginBottom: 4 }}>Liên kết Zalo hỗ trợ học tập</div>
          <div style={{ color: "var(--muted)", fontSize: 13.5, lineHeight: 1.6 }}>
            {linked ? `Đã liên kết với Zalo ${d.sender_name || ""}. Team sẽ nhận diện đúng hồ sơ khi bạn hỏi trong group.`
              : ready ? "Hồ sơ hỗ trợ đã lưu. Gửi câu xác nhận vào group một lần để hệ thống bắt đúng tên Zalo hiển thị."
              : "Agent sẽ lưu hồ sơ trong Bài 1. Có thể copy câu dưới đây gửi vào group để xác nhận tên Zalo."}
          </div>
          {!linked && <code style={{ display: "inline-block", marginTop: 8, padding: "6px 9px", borderRadius: 8, background: "#fff", border: "1px solid var(--line)", color: "#0d1f33", fontSize: 12.5 }}>{d.message}</code>}
          <div className="zalo-group-links">
            {suggested && <a className="zalo-group-btn primary" href={suggested[1]} target="_blank" rel="noreferrer">Mở đúng nhóm {suggested[0]}</a>}
            {!suggested && <div className="zalo-group-hint">Chưa xác định lớp từ hồ sơ. Chọn đúng nhóm anh/chị đang học:</div>}
            {(!suggested || !linked) && rest.map((g) => <a key={g[0]} className="zalo-group-btn" href={g[1]} target="_blank" rel="noreferrer">{g[0]}</a>)}
          </div>
        </div>
        {!linked && <button className="btn btn-gold" disabled={busy} onClick={copy}>Copy câu liên kết</button>}
      </div>
    </div></section>
  );
}
window.ZaloLinkPanel = ZaloLinkPanel;