/* ============================================================
   beedle dataroom — Home (grid / list / sections layouts)
   ============================================================ */
function HomeHead({ company, role, sections, docs, onNewSection }) {
  const totalDocs = sections.reduce((n, s) => n + docs.filter(d => d.section === s.id && canSee(d, role)).length, 0);
  return (
    <div className="page-head" style={{ alignItems: "flex-start" }}>
      <div>
        <div className="eyebrow">{company.room}</div>
        <h1 className="page-title" style={{ marginTop: 10 }}>{T("{co} data room", { co: company.name.split(" ")[0] })}</h1>
        <p className="page-sub">{company.description}</p>
        <div className="stat-row">
          <div className="stat"><span className="v">{sections.length}</span><span className="k">{T("Sections you can access")}</span></div>
          <div className="stat"><span className="v">{totalDocs}</span><span className="k">{T("Documents")}</span></div>
          <div className="stat"><span className="v" style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Icon name="pin" size={18} style={{ color: "var(--ink-3)" }} />{company.location.split(",")[0]}</span><span className="k">{T("Headquarters")}</span></div>
        </div>
      </div>
      {role.admin && (
        <div className="actions">
          <button className="btn btn-ghost" onClick={() => onNewSection("requests")}><Icon name="key" size={16} />{T("Access requests")}</button>
          <button className="btn btn-ghost" onClick={() => onNewSection("members")}><Icon name="people" size={16} />{T("Members")}</button>
          <button className="btn btn-ghost" onClick={() => onNewSection("data")}><Icon name="download" size={16} />{T("Export / import")}</button>
          <button className="btn btn-ghost" onClick={() => onNewSection("branding")}><Icon name="sliders" size={16} />{T("Branding")}</button>
          <button className="btn btn-primary" onClick={() => onNewSection("section")}><Icon name="plus" size={16} />{T("New section")}</button>
        </div>
      )}
    </div>
  );
}

function Home({ company, role, sections, docs, layout, onOpenSection, onOpenDoc, onNewSection }) {
  const counts = (s) => docs.filter(d => d.section === s.id && canSee(d, role)).length;

  return (
    <div className="page">
      <HomeHead company={company} role={role} sections={sections} docs={docs} onNewSection={onNewSection} />

      {layout === "grid" && (
        <div className="grid">
          {sections.map(s => (
            <div key={s.id} className="sec-card animUp" onClick={() => onOpenSection(s.id)}>
              <div className="top">
                <SectionGlyph section={s} />
                {role.admin && s.key !== "all" ? <KeyPill k={s.key} locked /> : <Icon name="folder" size={18} style={{ color: "var(--ink-4)" }} />}
              </div>
              <h3>{s.name}</h3>
              <div className="desc">{s.desc}</div>
              <div className="foot">
                <span className="ct">{counts(s)} {counts(s) !== 1 ? T("documents") : T("document")}</span>
                <Icon name="arrowR" size={18} className="arrow" />
              </div>
            </div>
          ))}
          {role.admin && (
            <button className="sec-card add" onClick={() => onNewSection("section")}>
              <span className="plus"><Icon name="plus" size={22} /></span>
              <div style={{ fontWeight: 600 }}>{T("New section")}</div>
              <div style={{ fontSize: 12.5, marginTop: 3 }}>{T("Create a folder & set its key")}</div>
            </button>
          )}
        </div>
      )}

      {layout === "list" && (
        <div className="listv animUp">
          <div className="list-head"><span /><span>{T("Section")}</span><span>{T("Description")}</span><span>{T("Access")}</span><span>{T("Docs")}</span></div>
          {sections.map(s => (
            <div key={s.id} className="list-row" onClick={() => onOpenSection(s.id)}>
              <SectionGlyph section={s} size={38} radius={10} />
              <span className="nm">{s.name}</span>
              <span className="ds">{s.desc}</span>
              <span>{role.admin && s.key !== "all" ? <KeyPill k={s.key} locked /> : <span className="pill pill-green"><Icon name="unlock" size={11} />{T("Open")}</span>}</span>
              <span className="ct" style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: "flex-end" }}>{counts(s)}<Icon name="arrowR" size={16} className="arrow" /></span>
            </div>
          ))}
        </div>
      )}

      {layout === "sections" && (
        <div className="stack">
          {sections.map(s => {
            const list = docs.filter(d => d.section === s.id && canSee(d, role));
            return (
              <section key={s.id} className="stack-sec animUp">
                <div className="stack-head" onClick={() => onOpenSection(s.id)}>
                  <SectionGlyph section={s} size={42} radius={11} />
                  <div>
                    <h3>{s.name}</h3>
                    <div className="desc">{s.desc}</div>
                  </div>
                  <div className="spacer" />
                  {role.admin && s.key !== "all" && <KeyPill k={s.key} locked />}
                  <button className="btn btn-quiet btn-sm">{T("Open")}<Icon name="arrowR" size={15} /></button>
                </div>
                <div className="stack-docs">
                  {list.slice(0, 4).map(d => (
                    <div key={d.id} className="doc-tile" onClick={() => onOpenDoc(d)}>
                      <DocType type={d.type} size="sm" />
                      <div style={{ minWidth: 0 }}>
                        <div className="tnm">{d.name}</div>
                        <div className="tmeta">{T(d.type.toUpperCase())} · {d.updated}</div>
                      </div>
                    </div>
                  ))}
                  {list.length > 4 && (
                    <div className="doc-tile" onClick={() => onOpenSection(s.id)} style={{ justifyContent: "center", color: "var(--blue-ink)", fontWeight: 600 }}>
                      {T("+{n} more", { n: list.length - 4 })}
                    </div>
                  )}
                </div>
              </section>
            );
          })}
        </div>
      )}
    </div>
  );
}
Object.assign(window, { Home });