// Employer — Documents view

const EmployerDocuments = ({ toast }) => {
  const runs = LS_runs;
  const [filter, setFilter] = React.useState("alles");
  return (
    <div style={{ padding: "28px 32px 48px", maxWidth: 1180, margin: "0 auto" }}>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.5, textTransform: "uppercase", marginBottom: 6 }}>Archief</div>
        <h1 style={{ fontSize: 28 }}>Documenten</h1>
        <div style={{ color: "var(--ink-2)", marginTop: 4, fontSize: 14 }}>Alle loonstroken, aangiftes en journaalposten zijn 7 jaar onveranderlijk bewaard.</div>
      </div>

      <Row style={{ gap: 8, marginBottom: 18 }}>
        {["alles", "stroken", "aangiftes", "journaalposten"].map(f => (
          <button key={f} onClick={() => setFilter(f)} style={{
            padding: "6px 12px", fontSize: 12.5, fontWeight: 500,
            background: filter === f ? "var(--ink)" : "var(--surface)",
            color: filter === f ? "#fff" : "var(--ink-2)",
            border: "1px solid " + (filter === f ? "var(--ink)" : "var(--line-2)"),
            borderRadius: 999, cursor: "pointer", fontFamily: "inherit", textTransform: "capitalize",
          }}>{f}</button>
        ))}
        <div style={{ flex: 1 }} />
        <Btn size="sm" variant="ghost" icon="search" />
        <Btn size="sm" variant="secondary" icon="download">Export .zip</Btn>
      </Row>

      {runs.map(r => (
        <Card key={r.id} pad={0} style={{ marginBottom: 14 }}>
          <Row style={{ justifyContent: "space-between", padding: "14px 20px", borderBottom: "1px solid var(--line)" }}>
            <Row style={{ gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--accent-2)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="check" size={18} />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, textTransform: "capitalize" }}>Loonrun {r.label}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{r.employees} medewerkers · afgerond {LS_fmt.date(r.confirmed_at)}</div>
              </div>
            </Row>
            <Pill tone="success" dot>Gearchiveerd</Pill>
          </Row>
          {(() => {
            const showStroken = filter === "alles" || filter === "stroken";
            const showAangifte = filter === "alles" || filter === "aangiftes";
            const showJournaal = filter === "alles" || filter === "journaalposten";
            const cells = [];
            if (showStroken) cells.push({ key: "s", label: `${r.employees || 0} loonstroken`, sub: "→ medewerkers", icon: "users", onClick: () => window.open(`/api/runs/${r.id}/pdf`, "_blank") });
            if (showAangifte) cells.push({ key: "a", label: "Loonaangifte", sub: "→ Belastingdienst", icon: "building", onClick: () => window.open(`/api/runs/${r.id}/aangifte.pdf`, "_blank") });
            if (showJournaal) cells.push({ key: "j", label: "Journaalpost", sub: "→ administratie", icon: "docs", onClick: () => window.open(`/api/runs/${r.id}/journaalpost.csv`, "_blank") });
            const cols = cells.length === 1 ? "1fr" : cells.length === 2 ? "1fr 1fr" : "1fr 1fr 1fr";
            return (
              <div style={{ display: "grid", gridTemplateColumns: cols, gap: 0 }}>
                {cells.map((c, i) => (
                  <DocCell key={c.key} label={c.label} sub={c.sub} icon={c.icon} onClick={c.onClick} last={i === cells.length - 1} />
                ))}
              </div>
            );
          })()}
        </Card>
      ))}
    </div>
  );
};

const DocCell = ({ label, sub, icon, onClick, last }) => (
  <button onClick={onClick} style={{
    display: "flex", alignItems: "center", gap: 12,
    padding: "14px 20px", background: "transparent",
    border: "none", borderRight: last ? "none" : "1px solid var(--line)",
    cursor: "pointer", textAlign: "left", fontFamily: "inherit",
  }} onMouseEnter={e => e.currentTarget.style.background = "var(--bg-2)"}
     onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
    <div style={{ width: 30, height: 30, borderRadius: 6, background: "var(--bg-3)", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Icon name={icon} size={14} />
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{sub}</div>
    </div>
    <Icon name="download" size={14} style={{ color: "var(--ink-3)" }} />
  </button>
);

Object.assign(window, { EmployerDocuments });