'use client';

import { useEffect, useState } from 'react';
import { getAuditLog, type AuditAction } from '@/lib/api';

const PAGE_SIZE = 50;

export function AuditLog() {
  const [rows, setRows] = useState<AuditAction[]>([]);
  const [total, setTotal] = useState(0);
  const [offset, setOffset] = useState(0);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    getAuditLog(PAGE_SIZE, offset)
      .then(({ actions, total }) => {
        setRows(actions);
        setTotal(total);
      })
      .catch((e) => setError(String(e.message)))
      .finally(() => setLoading(false));
  }, [offset]);

  if (error) return <p className="text-red-400 text-sm">Error: {error}</p>;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">Audit log</h1>
        <span className="text-sm text-gray-500">{total} entries</span>
      </div>

      <div className="rounded-lg border border-gray-800 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-900 border-b border-gray-800">
            <tr>
              {['Time', 'Admin', 'Action', 'Target'].map((h) => (
                <th
                  key={h}
                  className="text-left px-4 py-2.5 text-xs text-gray-500 font-medium uppercase tracking-wide"
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-800">
            {loading ? (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-gray-500">
                  Loading…
                </td>
              </tr>
            ) : rows.length === 0 ? (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-gray-500">
                  No actions logged yet.
                </td>
              </tr>
            ) : (
              rows.map((a) => (
                <tr key={a.id} className="hover:bg-gray-900 transition-colors">
                  <td className="px-4 py-2.5 text-xs tabular-nums text-gray-400">
                    {a.createdAt.slice(0, 19).replace('T', ' ')}
                  </td>
                  <td className="px-4 py-2.5 font-mono text-xs text-gray-300 truncate max-w-[8rem]">
                    {a.adminId.slice(0, 8)}…
                  </td>
                  <td className="px-4 py-2.5">
                    <span className="px-1.5 py-0.5 rounded bg-gray-800 text-xs text-gray-200 font-mono">
                      {a.action}
                    </span>
                  </td>
                  <td className="px-4 py-2.5 text-xs text-gray-400">
                    {a.targetType && (
                      <span className="text-gray-500">{a.targetType}: </span>
                    )}
                    <span className="font-mono">{a.targetId?.slice(0, 12) ?? '—'}</span>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {total > PAGE_SIZE && (
        <div className="flex items-center gap-3 text-sm">
          <button
            disabled={offset === 0}
            onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
            className="px-3 py-1.5 rounded border border-gray-700 disabled:opacity-30 hover:border-gray-500 transition-colors"
          >
            Previous
          </button>
          <span className="text-gray-500">
            {offset + 1}–{Math.min(offset + PAGE_SIZE, total)} of {total}
          </span>
          <button
            disabled={offset + PAGE_SIZE >= total}
            onClick={() => setOffset(offset + PAGE_SIZE)}
            className="px-3 py-1.5 rounded border border-gray-700 disabled:opacity-30 hover:border-gray-500 transition-colors"
          >
            Next
          </button>
        </div>
      )}
    </div>
  );
}