import { AdminShell, EmptyState, StatCard, StatusPill } from '@/app/components/admin/admin-page.jsx';
import { listActivity, reportingSnapshot } from '@/lib/delegation.js';

export const dynamic = 'force-dynamic';
export const runtime = 'nodejs';

export default function ActivityPage() {
  const activity = listActivity({ limit: 200 });
  const reporting = reportingSnapshot();
  return (
    <AdminShell title="Activity" description="Business activity feed for task mutations, assignments, approvals, and run state changes.">
      <section className="admin-stats">
        <StatCard label="Feed rows" value={activity.length} />
        <StatCard label="Delegations" value={reporting.totals.recent_delegations} />
        <StatCard label="Pending approvals" value={reporting.totals.pending_approvals} />
        <StatCard label="Running executions" value={reporting.totals.running_executions} />
      </section>
      <section className="admin-panel">
        <div className="admin-panel-head"><span>Activity feed page</span><small>Business mutations, not raw log chunks.</small></div>
        {activity.length ? (
          <div className="admin-card-list compact">
            {activity.map(item => (
              <article key={item.id} className="admin-record compact">
                <div className="admin-record-top"><b>{item.action}</b><StatusPill>{item.entity_type || 'event'}</StatusPill></div>
                <p>{item.entity_id || item.agent_id || 'system'}</p>
                <div className="admin-tool-meta"><span>{item.actor_id || item.actor_type}</span><span>{item.created_at}</span><span>cursor {item.cursor}</span></div>
              </article>
            ))}
          </div>
        ) : <EmptyState title="No activity yet">Business activity will accumulate here as tasks and runs change state.</EmptyState>}
      </section>
    </AdminShell>
  );
}
