/* ============================================================
   beedle dataroom — Document viewer (chrome: minimal/framed/immersive)
   ============================================================ */
function Viewer({ doc, section, role, canEdit, chrome = "minimal", onClose, onDownload, onEditContent, onPresent, presenting }) {
  const [page, setPage] = React.useState(1);
  const paged = (doc.type === "pdf" || doc.type === "image") && doc.pages > 1;
  const total = doc.pages || 1;
  // Page-bearing docs can open the full-screen page viewer ("Present"). Real
  // uploaded .pptx is excluded until server-side PPT→PDF conversion lands (it'd
  // only show the download card); the mock deck (type ppt, no file) is fine.
  const canPresent = !!onPresent && (doc.type === "pdf" || doc.type === "image" || (doc.type === "ppt" && !doc.hasFile));

  React.useEffect(() => { setPage(1); }, [doc.id]);
  React.useEffect(() => {
    const h = (e) => {
      // The full-screen page viewer sits on top and owns the keyboard while open
      // (it has its own Esc/Arrow handlers) — don't double-handle and close both.
      if (presenting) return;
      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, presenting]);

  const cls = chrome === "immersive" ? "dark" : chrome === "framed" ? "framed" : "light";
  const showMeta = chrome === "framed";
  // Uploaded pdf/html files get the whole stage (no paper margins) — the
  // embedded document brings its own page chrome.
  const fillStage = !!doc.hasFile && (doc.type === "pdf" || doc.type === "html");
  // Phones (portrait OR landscape) fold the toolbar into "…" and show the
  // metadata panel as a full-screen overlay on demand instead of a fixed 300px
  // side column — useIsPhone catches a landscape phone that's wider than 640px.
  const isPhone = useIsPhone();
  const [metaOpen, setMetaOpen] = React.useState(false);

  const metaBody = (
    <React.Fragment>
      <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>
      )}
    </React.Fragment>
  );

  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>
        )}
        {isPhone ? (
          <OverflowMenu btnClass="vbtn" title={T("Document actions")} items={[
            canPresent && { icon: "play", label: T("Present"), onClick: () => onPresent() },
            canEdit && doc.type === "html" && !doc.hasFile && onEditContent && { icon: "edit", label: T("Edit content"), onClick: () => onEditContent(doc) },
            { icon: "print", label: T("Print"), onClick: () => window.print() },
            { icon: "share", label: T("Share") },
            { icon: doc.downloadable ? "download" : "lock", label: doc.downloadable ? T("Download") : T("View only"), disabled: !doc.downloadable, onClick: () => onDownload(doc) },
            showMeta && { icon: "info", label: T("Details"), onClick: () => setMetaOpen(true) },
          ].filter(Boolean)} />
        ) : (
        <React.Fragment>
        {canPresent && (
          <button className="vbtn" onClick={() => onPresent()} title={T("Full-screen page view")}><Icon name="play" size={15} />{T("Present")}</button>
        )}
        {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>
        </React.Fragment>
        )}
      </div>

      <div className="vbody scroll">
        <div className={"vstage scroll" + (fillStage ? " fill" : "")}>
          <DocContent doc={doc} page={page} />
        </div>
        {showMeta && !isPhone && (
          <aside className="vmeta-panel scroll">{metaBody}</aside>
        )}
      </div>

      {isPhone && metaOpen && (
        <aside className="vmeta-panel mobile scroll">
          <button className="vclose" onClick={() => setMetaOpen(false)} title={T("Close")}><Icon name="x" size={18} /></button>
          {metaBody}
        </aside>
      )}

      {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 });