/**
 * Admin activity log page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import React, { useState, useEffect } from 'react';
import type { JSX } from 'react';
import { adminApi } from '../../lib/adminApi';

interface ActivityEntry {
  id: number;
  action: string;
  user_email: string;
  target_type?: string;
  target_id?: string;
  timestamp: string;
  details?: string;
}

export default function AdminActivityLog(): JSX.Element {
  const [entries, setEntries] = useState<ActivityEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);

  useEffect(() => {
    adminApi.getActivityLog({ page, pageSize: 50 })
      .then(setEntries)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [page]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold text-foreground">Activity Log</h1>
        <p className="text-sm text-muted">Recent administrative actions</p>
      </div>

      <div className="card overflow-hidden">
        {loading ? (
          <div className="p-8 text-center">
            <p className="text-muted">Loading activity log...</p>
          </div>
        ) : entries.length === 0 ? (
          <div className="p-8 text-center">
            <p className="text-muted">No activity recorded</p>
          </div>
        ) : (
          <table className="w-full text-sm">
            <thead className="bg-surface-sunken">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted">Time</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted">User</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted">Action</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted">Target</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-muted">Details</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {entries.map((entry) => (
                <tr key={entry.id} className="hover:bg-surface-sunken transition-colors">
                  <td className="px-4 py-3 text-muted whitespace-nowrap">
                    {new Date(entry.timestamp).toLocaleString()}
                  </td>
                  <td className="px-4 py-3 text-foreground">{entry.user_email}</td>
                  <td className="px-4 py-3">
                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-sunken text-foreground">
                      {entry.action}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-muted">
                    {entry.target_type ? `${entry.target_type}#${entry.target_id}` : '—'}
                  </td>
                  <td className="px-4 py-3 text-muted text-xs">{entry.details || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      <div className="flex items-center gap-2">
        <button
          onClick={() => setPage((p) => Math.max(1, p - 1))}
          disabled={page === 1 || loading}
          className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Previous
        </button>
        <button
          onClick={() => setPage((p) => p + 1)}
          disabled={entries.length < 50 || loading}
          className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Next
        </button>
        <span className="text-sm text-muted">Page {page}</span>
      </div>
    </div>
  );
}
