---
import type { ActivityRow } from '../../lib/db';
import { fmtDateTime } from '../../lib/markdown';

interface Props {
  rows: ActivityRow[];
}

const { rows } = Astro.props;
---
<div class="tab-content">
  <section class="section">
    <h2 class="label-sm section-heading">Recent activity</h2>
    <p class="body-sm section-note">
      The raw activity feed — what powers the ticker on /pulse. Read-only debug view.
      Showing up to 200 most-recent events; the ticker takes the last 12 within 7 days.
    </p>

    {rows.length === 0 ? (
      <p class="body-sm empty-msg">No activity recorded yet.</p>
    ) : (
      <table class="data-table">
        <thead>
          <tr>
            <th class="label-sm">When</th>
            <th class="label-sm">Actor</th>
            <th class="label-sm">Kind</th>
            <th class="label-sm">Subject</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(r => (
            <tr>
              <td class="body-sm muted">{fmtDateTime(r.created_at)}</td>
              <td class="body-sm">{r.actor_name} <span class="muted">({r.actor_role})</span></td>
              <td class="body-sm" style="text-transform:lowercase">{r.kind}</td>
              <td class="body-sm muted">{r.subject_type} #{r.subject_id}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )}
  </section>
</div>