/* ============================================================
   beedle dataroom — Folder detail (document table + admin)
   Docs arrive annotated with `mode` ("list"|"view"|"edit") = the caller's
   effective access. `canEdit` = the caller may edit this section (.edit).
   ============================================================ */
function Folder({ section, role, docs, canEdit, onOpenDoc, onDownload, onRequestAccess, onAddDocs, onNewPage, onEditDoc, onDeleteDoc }) {
  const [sort, setSort] = React.useState("updated");
  const sorted = [...docs].sort((a, b) => sort === "name" ? a.name.localeCompare(b.name) : 0);

  return (
    <div className="page">
      <div className="page-head" style={{ alignItems: "flex-start" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 12 }}>
            <SectionGlyph section={section} size={54} radius={15} />
            <div>
              <div className="eyebrow" style={{ color: section.color }}>{role.admin && section.key !== "all" ? T("{label} access", { label: KEYS[section.key].label }) : T("Section")}</div>
              <h1 className="page-title" style={{ marginTop: 4 }}>{section.name}</h1>
            </div>
          </div>
          <p className="page-sub">{section.desc}</p>
        </div>
        {canEdit && (
          <div className="actions">
            {role.admin && (
              <button className="btn btn-ghost"><Icon name="key" size={16} />{T("Edit key")}</button>
            )}
            <button className="btn btn-ghost" onClick={onNewPage}><Icon name="edit" size={16} />{T("New page")}</button>
            <button className="btn btn-primary" onClick={onAddDocs}><Icon name="upload" size={16} />{T("Add documents")}</button>
          </div>
        )}
      </div>

      <div className="toolbar">
        <span className="pill"><Icon name="file" size={12} />{docs.length} {docs.length !== 1 ? T("documents") : T("document")}</span>
        {role.admin && section.key !== "all" && <KeyPill k={section.key} locked />}
        <div className="spacer" />
        <div className="seg">
          <button className={sort === "updated" ? "on" : ""} onClick={() => setSort("updated")}>{T("Recent")}</button>
          <button className={sort === "name" ? "on" : ""} onClick={() => setSort("name")}>{T("Name")}</button>
        </div>
      </div>

      {docs.length === 0 ? (
        <div className="empty">
          <div className="ic"><Icon name="folder" size={28} /></div>
          <h3>{T("Nothing here yet")}</h3>
          <p>{canEdit ? T("Drop documents to populate this section. Each file gets its own visibility key.") : T("No documents have been shared in this section for your access level.")}</p>
        </div>
      ) : (
        <div className="dtable">
          <div className="dthead">
            <span />
            <span>{T("Document")}</span>
            <span>{T("Access")}</span>
            <span>{T("Size")}</span>
            <span>{T("Updated")}</span>
            <span style={{ textAlign: "right" }}>{T("Actions")}</span>
          </div>
          {sorted.map(d => {
            const listOnly = d.mode === "list";
            return (
              <div key={d.id} className={"drow" + (listOnly ? " locked" : "")} onClick={() => listOnly ? onRequestAccess(d) : onOpenDoc(d)}>
                <DocType type={d.type} />
                <div className="dnm">
                  <div className="t">
                    {d.name}
                    {role.admin && d.key !== "all" && <KeyPill k={d.key} locked />}
                  </div>
                  <div className="s">{d.type.toUpperCase()}{d.pages > 1 ? ` · ${d.pages} ${d.type === "image" ? T("images") : d.type === "ppt" ? T("slides") : T("pages")}` : ""} · {d.by}</div>
                </div>
                <div className="cell">
                  {listOnly
                    ? <span className="pill"><Icon name="lock" size={11} />{T("List only")}</span>
                    : d.downloadable
                      ? <span className="pill pill-green"><Icon name="download" size={11} />{T("Downloadable")}</span>
                      : <span className="pill"><Icon name="eye" size={11} />{T("View only")}</span>}
                </div>
                <div className="cell dim tnum">{listOnly ? "—" : d.size}</div>
                <div className="cell dim">{d.updated}</div>
                <div className="ractions" onClick={e => e.stopPropagation()}>
                  {listOnly ? (
                    <button className="act" title={T("Request access")} onClick={() => onRequestAccess(d)}><Icon name="key" size={15} /></button>
                  ) : (
                    <React.Fragment>
                      <button className="act" title={T("Open")} onClick={() => onOpenDoc(d)}><Icon name="eye" size={15} /></button>
                      <button className="act" title={d.downloadable ? T("Download") : T("Download disabled")} disabled={!d.downloadable} style={!d.downloadable ? { opacity: .4, cursor: "not-allowed" } : {}} onClick={() => d.downloadable && onDownload(d)}><Icon name="download" size={15} /></button>
                      {d.mode === "edit" && <button className="act" title={T("Edit")} onClick={() => onEditDoc(d)}><Icon name="edit" size={15} /></button>}
                      {d.mode === "edit" && <button className="act danger" title={T("Delete")} onClick={() => onDeleteDoc(d)}><Icon name="trash" size={15} /></button>}
                    </React.Fragment>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {canEdit && docs.length > 0 && (
        <div className="dropzone" onClick={onAddDocs}>
          <div className="ic"><Icon name="upload" size={22} /></div>
          <div className="t">{T("Drop documents here")}</div>
          <div className="h">{T("PDF, images, HTML, video or slides — set downloadable & key per file")}</div>
        </div>
      )}
    </div>
  );
}
Object.assign(window, { Folder });