/* ============================================================
   beedle dataroom — Document viewer (chrome: minimal/framed/immersive)
   ============================================================ */
function Viewer({ doc, section, role, canEdit, chrome = "minimal", onClose, onDownload, onEditContent }) {
  const [page, setPage] = React.useState(1);
  const paged = (doc.type === "pdf" || doc.type === "image") && doc.pages > 1;
  const total = doc.pages || 1;

  React.useEffect(() => { setPage(1); }, [doc.id]);
  React.useEffect(() => {
    const h = (e) => {
      if (e.key === "Escape") onClose();
      if (paged && e.key === "ArrowRight") setPage(p => Math.min(total, p + 1));
      if (paged && e.key === "ArrowLeft") setPage(p => Math.max(1, p - 1));
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [paged, total, onClose]);

  const cls = chrome === "immersive" ? "dark" : chrome === "framed" ? "framed" : "light";
  const showMeta = chrome === "framed";

  return (
    <div className={"viewer " + cls}>
      <div className="vtop">
        <button className="vclose" onClick={onClose} title={T("Close (Esc)")}><Icon name="x" size={18} /></button>
        <div className="vt">
          <DocType type={doc.type} size="sm" />
          <span style={{ minWidth: 0 }}>
            {doc.name}<br /><span className="s">{section ? section.name : ""} · {doc.size !== "—" ? doc.size : doc.type.toUpperCase()}</span>
          </span>
        </div>
        <div className="vspacer" />
        {role.admin && doc.key !== "all" && <KeyPill k={doc.key} locked />}
        {paged && (
          <div className="pg" style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: cls === "dark" ? "#8AA0AC" : "var(--ink-3)", marginRight: 4 }}>
            <button className="vnav" onClick={() => setPage(p => Math.max(1, p - 1))}><Icon name="chevL" size={15} /></button>
            <span className="tnum">{page} / {total}</span>
            <button className="vnav" onClick={() => setPage(p => Math.min(total, p + 1))}><Icon name="chevR" size={15} /></button>
          </div>
        )}
        {canEdit && doc.type === "html" && !doc.hasFile && onEditContent && (
          <button className="vbtn" onClick={() => onEditContent(doc)}><Icon name="edit" size={15} />{T("Edit content")}</button>
        )}
        <button className="vbtn" onClick={() => window.print()}><Icon name="print" size={15} />{T("Print")}</button>
        <button className="vbtn"><Icon name="share" size={15} />{T("Share")}</button>
        <button className={"vbtn primary" + (doc.downloadable ? "" : " disabled")} onClick={() => doc.downloadable && onDownload(doc)} title={doc.downloadable ? T("Download") : T("Download disabled by admin")}>
          <Icon name={doc.downloadable ? "download" : "lock"} size={15} />{doc.downloadable ? T("Download") : T("View only")}
        </button>
      </div>

      <div className="vbody scroll">
        <div className="vstage scroll">
          <DocContent doc={doc} page={page} />
        </div>
        {showMeta && (
          <aside className="vmeta-panel scroll">
            <div className="eyebrow" style={{ marginBottom: 8 }}>{T("Document")}</div>
            <h4>{doc.name}</h4>
            <p className="mp-desc">{doc.desc}</p>
            <div style={{ marginTop: 18 }}>
              <div className="mp-row"><span className="k">{T("Type")}</span><span className="v">{doc.type.toUpperCase()}</span></div>
              <div className="mp-row"><span className="k">{doc.type === "image" ? T("Images") : doc.type === "ppt" ? T("Slides") : doc.type === "video" ? T("Duration") : T("Pages")}</span><span className="v">{doc.type === "video" ? doc.duration : doc.pages}</span></div>
              <div className="mp-row"><span className="k">{T("Size")}</span><span className="v tnum">{doc.size}</span></div>
              <div className="mp-row"><span className="k">{T("Updated")}</span><span className="v">{doc.updated}</span></div>
              <div className="mp-row"><span className="k">{T("Owner")}</span><span className="v">{doc.by}</span></div>
              <div className="mp-row"><span className="k">{T("Access")}</span><span className="v">{KEYS[doc.key].label}</span></div>
              <div className="mp-row" style={{ borderBottom: 0 }}><span className="k">{T("Download")}</span><span className="v" style={{ color: doc.downloadable ? "var(--green)" : "var(--ink-3)" }}>{doc.downloadable ? T("Allowed") : T("Disabled")}</span></div>
            </div>
            {!doc.downloadable && (
              <div style={{ marginTop: 16, padding: 13, background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 12, fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55, display: "flex", gap: 9 }}>
                <Icon name="shield" size={16} style={{ color: "var(--ink-3)", flex: "none", marginTop: 1 }} />
                {T("This document is view-only. Downloads are disabled by the dataroom admin.")}
              </div>
            )}
          </aside>
        )}
      </div>

      {paged && chrome !== "framed" && (
        <div className="vfooter">
          <button className="vnav" onClick={() => setPage(p => Math.max(1, p - 1))}><Icon name="chevL" size={15} /></button>
          <span className="pg tnum">{doc.type === "image" ? T("Image") : T("Page")} {T("{page} of {total}", { page, total })}</span>
          <button className="vnav" onClick={() => setPage(p => Math.min(total, p + 1))}><Icon name="chevR" size={15} /></button>
        </div>
      )}
    </div>
  );
}
Object.assign(window, { Viewer });