// AdminAuditReports.jsx — F8. Report generator (Operations nav): pick report
// types + a date range, Generate to preview, Download CSV. Distinct from the
// chronological Audit log, which stays. Uses the shared window.downloadCSV util.

const REPORT_TYPES = [
  { key: "Investor Activity", desc: "Deposits, withdrawals, and position changes" },
  { key: "Compliance Actions", desc: "Freezes, pauses, clawbacks, and encumbrances" },
  { key: "KYC Submissions", desc: "KYC reviews, approvals, and rejections" },
  { key: "Liquidation Events", desc: "Manual and automated liquidations" },
  { key: "Identity Changes", desc: "Claim additions, removals, and status changes" },
  { key: "Facility Operations", desc: "Facility deployments, config changes, and shutdowns" },
];

const RANGE_DAYS = { "Last 7 days": 7, "Last 30 days": 30, "Last 90 days": 90, "Year to date": null };

const isoMinus = (days) => {
  const d = new Date();
  if (days != null) d.setUTCDate(d.getUTCDate() - days);
  else { d.setUTCMonth(0); d.setUTCDate(1); }
  return d.toISOString().slice(0, 10);
};

const AdminAuditReports = ({ state, onRetry }) => {
  const [selected, setSelected] = React.useState(["Compliance Actions"]);
  const [range, setRange] = React.useState("Last 30 days");
  const [report, setReport] = React.useState(null);
  if (state === "loading") return <PageSkeleton shape="rows" />;
  if (state === "error") return <PageError title="Couldn't load audit reports" onRetry={onRetry} />;

  const toggle = (k) => setSelected((prev) => prev.includes(k) ? prev.filter((x) => x !== k) : [...prev, k]);
  const today = new Date().toISOString().slice(0, 10);
  const from = isoMinus(RANGE_DAYS[range]);

  const generate = () => {
    const rows = selected.flatMap((t) => (window.ADMIN_REPORT_ROWS[t] || []).map((r) => ({ ...r, type: t })));
    setReport({ rows, from, to: today, range });
  };

  const exportCSV = () => {
    window.downloadCSV(
      `audit-report-${report.from}-to-${report.to}.csv`,
      ["Date", "Type", "Actor", "Target", "Action", "Details", "Status"],
      report.rows.map((r) => [r.date, r.type, r.actor, r.target, r.action, r.details, r.status]),
    );
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-24)" }}>
      <PageHeader eyebrow="Operations" title="Audit reports" icon="docs"
        lede="Generate, preview, and export audit reports across platform activity." />

      <section className="card">
        <SectionHeader eyebrow="Configuration" title="Report configuration" />
        <div style={{ font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: -8, marginBottom: "var(--space-16)" }}>
          Select the report types and date range, then generate to preview.
        </div>
        <div style={{ font: '500 12px/16px "Inter", sans-serif', color: "var(--fg)", marginBottom: "var(--space-8)" }}>Report types <span style={{ color: "var(--fg-subtle)", fontWeight: 400 }}>({selected.length} selected)</span></div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "var(--space-12)", marginBottom: "var(--space-20)" }}>
          {REPORT_TYPES.map((rt) => {
            const on = selected.includes(rt.key);
            return (
              <button key={rt.key} type="button" onClick={() => toggle(rt.key)} style={{
                all: "unset", cursor: "pointer", boxSizing: "border-box", padding: "var(--space-12) var(--space-16)", borderRadius: "var(--radius-lg)",
                border: on ? "1.5px solid var(--accent)" : "1px solid var(--border-strong)",
                background: on ? "var(--blue-10)" : "var(--surface)",
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: "var(--space-8)" }}>
                  <span style={{ width: 16, height: 16, borderRadius: "var(--radius-sm)", display: "grid", placeItems: "center", background: on ? "var(--accent)" : "transparent", border: on ? "none" : "1.5px solid var(--border-strong)" }}>
                    {on && <Icon name="check" size={11} stroke={2.4} style={{ color: "var(--white-100)" }} />}
                  </span>
                  <span style={{ font: '500 13px/18px "Inter", sans-serif', color: "var(--fg)" }}>{rt.key}</span>
                </div>
                <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: "var(--space-4)", marginLeft: "var(--space-24)" }}>{rt.desc}</div>
              </button>
            );
          })}
        </div>
        <div style={{ font: '500 12px/16px "Inter", sans-serif', color: "var(--fg)", marginBottom: "var(--space-8)" }}>Date range</div>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-12)", flexWrap: "wrap" }}>
          <SegmentControl value={range} onChange={setRange} options={Object.keys(RANGE_DAYS).map((k) => ({ value: k, label: k }))} />
          <span className="tnum" style={{ font: '400 12px "Inter", sans-serif', color: "var(--fg-subtle)" }}>From {fmtDate(from)} to {fmtDate(today)}</span>
        </div>
        <div style={{ marginTop: "var(--space-20)" }}>
          <button className="btn btn--primary" type="button" disabled={selected.length === 0} style={{ opacity: selected.length ? 1 : 0.5 }} onClick={generate}>
            <Icon name="docs" size={14} stroke={1.6} /> Generate report
          </button>
        </div>
      </section>

      {report && (
        <div>
          <SectionHeader eyebrow="Results" title="Report results" count={report.rows.length}
            action={<button className="btn btn--secondary" type="button" onClick={exportCSV}><Icon name="download" size={14} stroke={1.6} /> Download CSV</button>} />
          <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: -8, marginBottom: "var(--space-16)" }}>
            {report.rows.length} records from {fmtDate(report.from)} to {fmtDate(report.to)}
          </div>
          <section className="card" style={{ padding: 0 }}>
            <div className="adm-scroll">
              <div className="adm-table-head" style={{ display: "grid", gridTemplateColumns: "110px 160px 130px 150px 130px 1fr 110px", gap: "var(--space-16)", padding: "var(--space-12) var(--space-20)", background: "var(--bg-alt)", borderBottom: "1px solid var(--border)" }}>
                <Th sortable>Date</Th><Th>Type</Th><Th>Actor</Th><Th>Target</Th><Th>Action</Th><Th>Details</Th><Th>Status</Th>
              </div>
              {report.rows.length === 0 ? (
                <EmptyState icon="docs" title="No records" body="No activity in the selected types and range." />
              ) : report.rows.map((r, i) => (
                <div key={i} className="adm-table-row" style={{ display: "grid", gridTemplateColumns: "110px 160px 130px 150px 130px 1fr 110px", gap: "var(--space-16)", padding: "var(--space-12) var(--space-20)", alignItems: "center", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
                  <span className="tnum" style={{ font: '400 13px "Inter", sans-serif', color: "var(--fg-muted)" }}>{fmtDate(r.date)}</span>
                  <span style={{ font: '400 12px "Inter", sans-serif', color: "var(--fg-subtle)" }}>{r.type}</span>
                  <span className="addr" style={{ font: '400 12px "JetBrains Mono", monospace', color: "var(--fg-muted)" }}>{r.actor}</span>
                  <span className="addr" style={{ font: '500 12px "JetBrains Mono", monospace', color: "var(--fg)" }}>{r.target}</span>
                  <span style={{ font: '500 13px "Inter", sans-serif', color: "var(--fg)" }}>{r.action}</span>
                  <span style={{ font: '400 13px "Inter", sans-serif', color: "var(--fg)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={r.details}>{r.details}</span>
                  <div><AdminStatus status={r.status} /></div>
                </div>
              ))}
            </div>
          </section>
        </div>
      )}
    </div>
  );
};

window.AdminAuditReports = AdminAuditReports;