// Reports — categorised scheduled + recent report library.
function Reports() {
  const { state, dispatch } = useApp();
  const [category, setCategory] = React.useState("all");

  const recent = state.filters.reportsCategory && state.filters.reportsCategory !== "all"
    ? RECENT_REPORTS.filter(r => r.category === state.filters.reportsCategory)
    : category === "all" ? RECENT_REPORTS : RECENT_REPORTS.filter(r => r.category === category);

  function run(name) {
    dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Report queued · ${name}` } });
    dispatch({ type: "LOG_AUDIT", event: { module: "HR", action: "Report generated", detail: name, tone: "ok" } });
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Reports · regulatory & operational</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>Reports</h1>
          <div className="page-sub">{SCHEDULED_REPORTS.length} scheduled · {RECENT_REPORTS.length} generated this week · NuCo keeps every report board-ready and audit-trailed.</div>
        </div>
        <div className="hstack">
          <Dropdown align="right" trigger={<button className="btn"><Icon name="calendar" size={13} /> Schedule</button>}>
            {(close) => (
              <>
                <div className="dropdown-label">Cadence presets</div>
                {["Daily 06:00","Weekly Monday","End of pay period","Monthly 1st","Quarterly"].map(c => (
                  <DropdownItem key={c} icon="clock" label={c} onClick={() => { run(`Custom schedule · ${c}`); close(); }} />
                ))}
              </>
            )}
          </Dropdown>
          <button className="btn primary" onClick={() => run("Ad-hoc report")}><Icon name="plus" size={13} /> New report</button>
        </div>
      </div>

      {/* Top metrics */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", marginBottom: 20 }}>
        {REPORT_METRICS.map((m, i) => (
          <div className="kpi" key={i}>
            <div className="kpi-label">{m.label}</div>
            <div className="kpi-value" style={{ fontSize: 26 }}>{m.value}</div>
            <div className="kpi-delta"><span className={m.tone === "up" ? "tone-up" : "tone-down"}>▲ {m.delta}</span></div>
          </div>
        ))}
      </div>

      {/* Categories */}
      <div className="card" style={{ marginBottom: 20 }}>
        <div className="card-head">
          <div>
            <div className="card-title">Report categories</div>
            <div className="card-sub">Pick a domain · NuCo keeps definitions versioned and audit-safe</div>
          </div>
          <Badge tone="ai">{REPORT_CATEGORIES.reduce((a, c) => a + c.count, 0)} templates</Badge>
        </div>
        <div className="card-body grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
          {REPORT_CATEGORIES.map(c => (
            <button key={c.key} className="card" style={{
              textAlign: "left", padding: 14, background: category === c.key ? "var(--ink)" : "var(--bone)",
              color: category === c.key ? "var(--paper)" : "var(--ink)",
              borderColor: category === c.key ? "var(--ink)" : "var(--line)", cursor: "pointer",
            }}
              onClick={() => setCategory(category === c.key ? "all" : c.key)}>
              <div className="hstack" style={{ justifyContent: "space-between", marginBottom: 8 }}>
                <div style={{ width: 28, height: 28, borderRadius: 6, display: "grid", placeItems: "center", background: category === c.key ? "rgba(255,255,255,.08)" : "var(--paper)" }}>
                  <Icon name={c.icon} size={14} />
                </div>
                <span className="mono" style={{ fontSize: 11, opacity: 0.7 }}>{c.count} templates</span>
              </div>
              <div style={{ fontWeight: 600, fontSize: 13.5, marginBottom: 2 }}>{c.label}</div>
              <div style={{ fontSize: 11.5, opacity: 0.75 }}>{c.desc}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.5fr) minmax(0, 1fr)", gap: 20 }}>
        {/* Recent reports */}
        <div className="card scroll">
          <div className="card-head">
            <div>
              <div className="card-title">Recent reports{category !== "all" && ` · ${REPORT_CATEGORIES.find(c => c.key === category)?.label}`}</div>
              <div className="card-sub">{recent.length} results · generated automatically or on demand</div>
            </div>
            <div className="hstack">
              {category !== "all" && <button className="btn ghost" onClick={() => setCategory("all")}><Icon name="x" size={11} /> Clear</button>}
              <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "All recent reports zipped · downloading…" } })}><Icon name="download" size={13} /> Download all</button>
            </div>
          </div>
          <div className="table-scroll">
            <table className="table">
              <thead>
                <tr><th>Report</th><th>Generated</th><th>By</th><th>Format</th><th style={{ textAlign: "right" }}>Downloads</th><th></th></tr>
              </thead>
              <tbody>
                {recent.map(r => (
                  <tr key={r.id}>
                    <td><div style={{ fontWeight: 500, fontSize: 12.5 }}>{r.name}</div><div className="sub mono" style={{ fontSize: 10.5 }}>{r.id} · {REPORT_CATEGORIES.find(c => c.key === r.category)?.label}</div></td>
                    <td className="mono" style={{ fontSize: 11.5 }}>{r.generated}</td>
                    <td>
                      {r.by === "NuCo" ? (
                        <span className="hstack" style={{ gap: 6 }}>
                          <span style={{ width: 20, height: 20, borderRadius: 4, background: "var(--ink)", color: "var(--paper)", display: "grid", placeItems: "center", fontFamily: "var(--font-serif)", fontSize: 11 }}>N</span>
                          <span style={{ fontSize: 12 }}>NuCo</span>
                        </span>
                      ) : <span style={{ fontSize: 12 }}>{r.by}</span>}
                    </td>
                    <td><span className="sub mono" style={{ fontSize: 11 }}>{r.format}</span></td>
                    <td className="mono" style={{ textAlign: "right" }}>{r.downloads}</td>
                    <td><button className="btn" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Downloaded · ${r.name}` } })}><Icon name="download" size={11} /></button></td>
                  </tr>
                ))}
                {recent.length === 0 && <tr><td colSpan={6} style={{ padding: 28, textAlign: "center" }}><div className="sub">No reports in this category.</div></td></tr>}
              </tbody>
            </table>
          </div>
        </div>

        {/* Scheduled */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Scheduled reports</div>
              <div className="card-sub">Auto-runs — zero admin overhead</div>
            </div>
            <Badge tone="ok" dot>live</Badge>
          </div>
          <div className="card-body vstack" style={{ gap: 8 }}>
            {SCHEDULED_REPORTS.map((s, i) => (
              <div key={s.id} className="vstack" style={{ gap: 4, padding: 10, background: "var(--bone)", borderRadius: 6, border: "1px solid var(--line)" }}>
                <div className="hstack" style={{ justifyContent: "space-between", gap: 8 }}>
                  <div style={{ fontWeight: 500, fontSize: 12.5, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</div>
                  <Badge tone={s.status} dot>{s.status === "ok" ? "healthy" : "attention"}</Badge>
                </div>
                <div className="sub mono" style={{ fontSize: 10.5 }}>{s.cadence} · next {s.next}</div>
                <div className="hstack" style={{ gap: 8, fontSize: 11, color: "var(--ink-3)" }}>
                  <span>To {s.audience}</span><span>·</span>
                  <span>last {s.lastRun}</span>
                </div>
                <div className="hstack" style={{ gap: 6, marginTop: 4 }}>
                  <button className="btn" style={{ padding: "2px 8px", fontSize: 11 }} onClick={() => run(s.name)}>Run now</button>
                  <button className="btn ghost" style={{ padding: "2px 8px", fontSize: 11 }} onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Edit schedule · ${s.name}` } })}>Edit</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Reports });