/* Khoe Sản Phẩm Học Viên — gallery động lực, chỉ hiện item đã duyệt. */
function ShowcasePage({ go }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    const load = (window.AG && window.AG.showcase ? window.AG.showcase() : Promise.reject());
    load.then((d) => { if (!d || d.ok === false || d.detail) throw new Error("showcase unavailable"); setData(d); })
      .catch(() => (window.AG && window.AG.hall ? window.AG.hall() : Promise.resolve({ items: [] })).then(setData));
  }, []);
  const items = (data && data.items) || [];
  const imgOf = (it) => it.drive_url || it.link || "";
  const hrefOf = (it) => it.source_url || it.drive_url || it.link || "#";
  const icon = (name, size) => { const F = window["ic" + name]; return F ? F({ size: size || 18 }) : null; };
  if (!data) return <div className="showcase-page"><div className="showcase-loading">Đang tải tường vinh danh...</div></div>;
  return (
    <div className="showcase-page">
      <div className="showcase-hero">
        <button className="showcase-back" onClick={() => go ? go("learn") : history.back()}>{"<"} Học tiếp</button>
        <div className="showcase-badge">{icon("Crown", 16)} Tường vinh danh</div>
        <h1>Khoe sản phẩm học viên</h1>
        <p>Những thành phẩm thật học viên đã làm cùng AI Agent. Mỗi sản phẩm được duyệt trước khi xuất hiện ở đây.</p>
        <div className="showcase-stats">
          <b>{data.total || items.length}</b><span>thành phẩm đã được khoe</span>
        </div>
      </div>
      {!items.length ? (
        <div className="showcase-empty">
          <b>Chưa có sản phẩm được duyệt.</b>
          <span>Hoàn thành bài tập, để Agent chụp ảnh thành phẩm và gửi Sam duyệt lên tường vinh danh.</span>
        </div>
      ) : (
        <div className="showcase-grid">
          {items.map((it) => (
            <a className="showcase-card" href={hrefOf(it)} target="_blank" rel="noopener" key={it.id}>
              <div className="showcase-thumb">
                {imgOf(it) ? <img src={imgOf(it)} alt={it.title || it.name || "Thành phẩm học viên"} loading="lazy" /> : icon("Document", 34)}
              </div>
              <div className="showcase-info">
                <span>{it.badge || "Đã duyệt"}</span>
                <h2>{it.title || it.caption || "Thành phẩm học viên"}</h2>
                <p>{it.description || it.lesson || "Một kết quả thật sau bài tập AI Agent."}</p>
                <small>{it.student_name || it.name || "Học viên DeChePro"}{it.lesson ? " · Bài " + it.lesson : ""}</small>
              </div>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}
Object.assign(window, { ShowcasePage });