(() => {
const { Card, Badge, Chip, Icon, Avatar, EmptyState, Button, StatCard, Modal, Field, Input, Select } = window.TaskFlowDesignSystem_dd53c2;

function AuditTrail({ entries = ACTIVITY, users = USERS, meId, onPurge }) {
  const bp = useBreakpoint();
  const [who, setWho] = React.useState(meId != null ? meId : null);
  const [kind, setKind] = React.useState("all");
  const wk = weekRange();
  const [range, setRange] = React.useState(wk);
  const [q, setQ] = React.useState("");
  const [purge, setPurge] = React.useState(null);   // {from,to} rentang log yang akan dihapus
  const picked = meId != null || who != null;
  const target = meId != null ? meId : who;
  const scoped = React.useMemo(() => (picked
    ? entries.filter((e) => (target === "all" ? true : e.user === target) && stampInRange(e.at, range.from, range.to))
    : []), [entries, picked, target, range.from, range.to]);
  const allList = React.useMemo(() => {
    const s = q.trim().toLowerCase();
    return scoped.filter((e) => (kind === "all" || e.kind === kind)
      && (!s || String(e.title).toLowerCase().includes(s) || String(e.detail || "").toLowerCase().includes(s)));
  }, [scoped, kind, q]);
  const [shown, setShown] = React.useState(30);
  React.useEffect(() => { setShown(30); }, [kind, who, q, range.from, range.to]);
  const list = allList.slice(0, shown);
  const nameOf = (id) => (id === 0 ? "Direktur Klinik" : userById(id).name);

  const KINDS = [["all", "Semua"], ["submit", "Kirim bukti"], ["accept", "Accept"], ["revision", "Revisi"], ["create", "Task baru"], ["comment", "Diskusi"], ["login", "Login"]];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: "var(--content-max)" }}>
      {picked && <div style={{ display: "grid", gridTemplateColumns: cols(bp, 2, 2, 4), gap: bp === "mobile" ? 10 : 16 }}>
        <StatCard label="Total aktivitas" value={scoped.length} icon="history" tone="teal" />
        <StatCard label="Bukti dikirim" value={scoped.filter((e) => e.kind === "submit").length} icon="upload" tone="mint" />
        <StatCard label="Revisi diminta" value={scoped.filter((e) => e.kind === "revision").length} icon="rotate-ccw" tone="coral" />
        <StatCard label="Accepted" value={scoped.filter((e) => e.kind === "accept").length} icon="shield-check" tone="leaf" />
      </div>}

      {meId == null && (
        <Card glass float padding={16} style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, paddingBottom: 10, flexWrap: "wrap" }}>
            <div>
              <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Pilih user</span>
              <h3 style={{ font: "var(--text-h3)", color: "var(--text-strong)" }}>Log dimuat per user</h3>
            </div>
            <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
              <PeriodFilter from={range.from} to={range.to} defaultFrom={wk.from} defaultTo={wk.to} onApply={setRange} />
              {who != null && <Button variant="ghost" size="sm" iconLeft="x" onClick={() => setWho(null)}>Ganti user</Button>}
              {onPurge && <Button variant="secondary" size="sm" iconLeft="trash-2" onClick={() => setPurge({ from: range.from, to: range.to, who: "all" })}>Hapus Log</Button>}
            </span>
          </div>
          <div style={{ display: "flex", gap: 10, overflowX: "auto", paddingBottom: 2 }}>
            <Chip label="Semua user" icon="users" count={entries.length} active={who === "all"} onClick={() => setWho("all")} />
            <Chip label="Direktur Klinik" icon="shield" count={entries.filter((e) => e.user === 0).length} active={who === 0} onClick={() => setWho(0)} />
            {users.map((u) => (
              <Chip key={u.id} label={u.name} icon="user" count={entries.filter((e) => e.user === u.id).length}
                active={who === u.id} onClick={() => setWho(u.id)} />
            ))}
          </div>
        </Card>
      )}

      {picked && <Card glass float padding={20} style={{ minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, paddingBottom: 14, flexWrap: "wrap" }}>
          <div>
            <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Audit trail</span>
            <h3 style={{ font: "var(--text-h2)", color: "var(--text-strong)" }}>{meId != null ? "Log Activity Saya" : who === "all" ? "Semua User" : nameOf(who)}</h3>
          </div>
          <span style={{ marginLeft: "auto", display: "flex", gap: 6, flexWrap: "wrap" }}>
            {KINDS.map(([id, label]) => (
              <button key={id} type="button" onClick={() => setKind(id)}
                style={{
                  height: 28, padding: "0 12px", cursor: "pointer", borderRadius: "var(--radius-pill)",
                  border: "1px solid " + (kind === id ? "transparent" : "var(--border-glass)"),
                  background: kind === id ? "var(--gradient-teal)" : "var(--surface-glass)",
                  color: kind === id ? "var(--white)" : "var(--text-muted)",
                  font: "var(--fw-bold) var(--fs-micro)/1 var(--font-body)", transition: "var(--transition-control)",
                }}>{label}</button>
            ))}
          </span>
        </div>

        <div style={{ display: "flex", gap: 10, alignItems: "flex-end", flexWrap: "wrap", paddingBottom: 14 }}>
          <div style={{ flex: "1 1 220px", minWidth: 0 }}>
            <Field label="Cari aktivitas"><Input icon="search" placeholder="Judul atau keterangan…" value={q} onChange={(e) => setQ(e.target.value)} /></Field>
          </div>
          <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{allList.length} dari {scoped.length} aktivitas pada rentang ini</span>
        </div>

        {list.length === 0 ? (
          <EmptyState icon="history" title="Belum ada aktivitas pada rentang ini" />
        ) : (
          <div style={{ display: "flex", flexDirection: "column" }}>
            {list.map((e, i) => (
              <div key={e.id} style={{ display: "flex", gap: 12, minWidth: 0 }}>
                <span style={{ display: "flex", flexDirection: "column", alignItems: "center", flex: "0 0 auto" }}>
                  <span style={{
                    width: 34, height: 34, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center",
                    background: "var(--surface-glass-strong)", border: "1px solid var(--border-glass)", boxShadow: "var(--shadow-xs)",
                  }}>
                    <Icon name={ACT_ICON[e.kind] || "dot"} size={16} color="var(--teal-600)" />
                  </span>
                  {i < list.length - 1 && <span style={{ flex: 1, width: 2, background: "linear-gradient(180deg,var(--teal-200),rgba(19,168,140,0))", borderRadius: 2 }} />}
                </span>
                <span style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 5, paddingBottom: 18 }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <Avatar src={avatarOf(e.user)} name={nameOf(e.user)} size={22} ring={false} />
                    <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.2 var(--font-body)", color: "var(--text-strong)" }}>{nameOf(e.user)}</span>
                    <Badge tone={ACT_TONE[e.kind] || "neutral"} size="sm">{e.kind}</Badge>
                    <span style={{ marginLeft: "auto", font: "var(--fw-medium) var(--fs-micro)/1 var(--font-mono)", color: "var(--text-faint)" }}>{e.at}</span>
                  </span>
                  <span style={{ font: "var(--text-body-default)", color: "var(--text-body)" }}>{e.title}</span>
                  {e.detail && <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{e.detail}</span>}
                </span>
              </div>
            ))}
            {allList.length > list.length && (
              <div style={{ display: "flex", alignItems: "center", gap: 10, paddingTop: 4, flexWrap: "wrap" }}>
                <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Menampilkan {list.length} dari {allList.length} aktivitas</span>
                <span style={{ marginLeft: "auto" }}>
                  <Button variant="secondary" size="sm" iconLeft="chevron-down" onClick={() => setShown((n) => n + 30)}>Muat 30 lagi</Button>
                </span>
              </div>
            )}
          </div>
        )}
      </Card>}

      {purge && onPurge && (
        <Modal open width={470} onClose={() => setPurge(null)} title="Hapus / Arsipkan Log"
          description="Log lama dihapus permanen agar penyimpanan tetap ringan. Sebaiknya export dulu bila diperlukan untuk audit."
          footer={<><Button variant="ghost" onClick={() => setPurge(null)}>Batal</Button>
            <Button variant="danger" iconLeft="trash-2" onClick={() => { onPurge(purge); setPurge(null); }}>Hapus Log</Button></>}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="Dari Tanggal"><Input type="date" value={purge.from} onChange={(e) => setPurge({ ...purge, from: e.target.value })} /></Field>
              <Field label="Sampai Tanggal"><Input type="date" value={purge.to} onChange={(e) => setPurge({ ...purge, to: e.target.value })} /></Field>
            </div>
            <Field label="Pemilik log" hint="Pilih satu user, atau semua user sekaligus.">
              <Select value={String(purge.who)} onChange={(e) => setPurge({ ...purge, who: e.target.value === "all" ? "all" : Number(e.target.value) })}
                options={[{ value: "all", label: "Semua user" }, { value: "0", label: "Direktur Klinik" }, ...users.map((u) => ({ value: String(u.id), label: u.name }))]} />
            </Field>
            <span style={{ display: "flex", gap: 8, padding: "10px 12px", background: "var(--coral-50)", border: "1px solid var(--coral-100)", borderRadius: "var(--radius-sm)" }}>
              <Icon name="triangle-alert" size={15} color="var(--coral-600)" />
              <span style={{ font: "var(--text-caption)", color: "var(--text-body)" }}>Disarankan menyimpan log 12 bulan terakhir. Penghapusan ini sendiri juga dicatat sebagai satu baris log baru.</span>
            </span>
          </div>
        </Modal>
      )}

      {!picked && (
        <Card glass padding={28} style={{ minWidth: 0 }}>
          <EmptyState icon="users" title="Pilih user terlebih dahulu" />
        </Card>
      )}
    </div>
  );
}
Object.assign(window, { AuditTrail });
})();