oO/apps/admin/src/components/UsersTable.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { getUsers, type AdminUser } from '@/lib/api';

const PAGE_SIZE = 50;

export function UsersTable() {
  const [users, setUsers] = useState<AdminUser[]>([]);
  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);
    getUsers(PAGE_SIZE, offset)
      .then(({ users, total }) => {
        setUsers(users);
        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">Users</h1>
        <span className="text-sm text-gray-500">{total} total</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>
              {['ID', 'Email', 'Name', 'Role', 'Consent', 'Joined', 'Status'].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={7} className="px-4 py-6 text-center text-gray-500">
                  Loading…
                </td>
              </tr>
            ) : users.length === 0 ? (
              <tr>
                <td colSpan={7} className="px-4 py-6 text-center text-gray-500">
                  No users yet.
                </td>
              </tr>
            ) : (
              users.map((u) => (
                <tr
                  key={u.id}
                  className="hover:bg-gray-900 transition-colors cursor-pointer"
                >
                  <td className="px-4 py-2.5 text-gray-500 text-xs font-mono tabular-nums">
                    {u.id.slice(0, 8)}
                  </td>
                  <td className="px-4 py-2.5">
                    <Link href={`/users/${u.id}`} className="hover:underline text-indigo-400">
                      {u.email}
                    </Link>
                  </td>
                  <td className="px-4 py-2.5 text-gray-300">{u.name ?? '—'}</td>
                  <td className="px-4 py-2.5">
                    <span
                      className={`px-1.5 py-0.5 rounded text-xs font-medium ${
                        u.role === 'admin'
                          ? 'bg-indigo-900 text-indigo-300'
                          : 'bg-gray-800 text-gray-400'
                      }`}
                    >
                      {u.role}
                    </span>
                  </td>
                  <td className="px-4 py-2.5">
                    {u.consentGiven ? (
                      <span className="text-emerald-400 text-xs">yes</span>
                    ) : (
                      <span className="text-gray-600 text-xs">no</span>
                    )}
                  </td>
                  <td className="px-4 py-2.5 text-gray-400 text-xs tabular-nums">
                    {u.createdAt.slice(0, 10)}
                  </td>
                  <td className="px-4 py-2.5">
                    {u.deletedAt ? (
                      <span className="text-red-500 text-xs">deleted</span>
                    ) : (
                      <span className="text-emerald-500 text-xs">active</span>
                    )}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      {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>
  );
}