/* ============================================================
   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, onEditSection, onEditDoc, onDeleteDoc }) {
  const [sort, setSort] = React.useState("updated");
  const sorted = [...docs].sort((a, b) => sort === "name" ? a.name.localeCompare(b.name) : 0);
  // Phones swap the 6-column table for tappable cards (actions live in each card's "…").
  const isMobile = useIsMobile();

  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 && (isMobile ? (
          <div className="actions">
            <button className="btn btn-primary" onClick={onAddDocs}><Icon name="upload" size={16} />{T("Add documents")}</button>
            <OverflowMenu btnClass="btn btn-ghost" title={T("Section tools")} items={[
              { icon: "sliders", label: T("Edit section"), onClick: onEditSection },
              { icon: "edit", label: T("New page"), onClick: onNewPage },
            ].filter(Boolean)} />
          </div>
        ) : (
          <div className="actions">
            <button className="btn btn-ghost" onClick={onEditSection}><Icon name="sliders" size={16} />{T("Edit section")}</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>

      {canEdit && section.construction && (
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderRadius: 12, background: "#FBF1DE", color: "#8A5A12", border: "1px solid #F0DDB3", fontSize: 13, marginBottom: 16 }}>
          <Icon name="cone" size={16} />
          <span>{T("Under construction — only you and other editors can see this section. Viewers get a “coming soon” notice until you turn it off.")}</span>
        </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>
      ) : isMobile ? (
        <div className="dcards">
          {sorted.map(d => {
            const listOnly = d.mode === "list";
            return (
              <div key={d.id} className={"dcard" + (listOnly ? " locked" : "")} onClick={() => listOnly ? onRequestAccess(d) : onOpenDoc(d)}>
                <DocType type={d.type} />
                <div className="dc-main">
                  <div className="t">{d.name}</div>
                  <div className="s">{d.type.toUpperCase()} · {listOnly ? T("List only") : d.updated}</div>
                </div>
                <OverflowMenu className="dc-menu" title={T("Document actions")} items={listOnly ? [
                  { icon: "key", label: T("Request access"), onClick: () => onRequestAccess(d) },
                ] : [
                  { icon: "eye", label: T("Open"), onClick: () => onOpenDoc(d) },
                  { icon: "download", label: d.downloadable ? T("Download") : T("Download disabled"), disabled: !d.downloadable, onClick: () => onDownload(d) },
                  d.mode === "edit" && { icon: "edit", label: T("Edit"), onClick: () => onEditDoc(d) },
                  d.mode === "edit" && { icon: "trash", label: T("Delete"), danger: true, onClick: () => onDeleteDoc(d) },
                ].filter(Boolean)} />
              </div>
            );
          })}
        </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>
  );
}
// Shown in place of the document table when a viewer (no .edit) opens a section
// that's still under construction. The section is visible in the nav so they know
// it's coming; its contents stay sealed (server-enforced) until it ships.
function ConstructionNotice({ section }) {
  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 }}>{T("Section")}</div>
              <h1 className="page-title" style={{ marginTop: 4 }}>{section.name}</h1>
            </div>
          </div>
          <p className="page-sub">{section.desc}</p>
        </div>
      </div>
      <div className="empty">
        <div className="ic"><Icon name="cone" size={28} /></div>
        <h3>{T("Coming soon")}</h3>
        <p>{T("We’re still building this section — you’ll have access the moment it’s ready.")}</p>
      </div>
    </div>
  );
}
Object.assign(window, { Folder, ConstructionNotice });