import { AccessDenied } from '../../../components/AccessDenied';
import { EmptyState, PageHeader } from '../../../components/DashboardPrimitives';
import { dashboardApi } from '../../../lib/api';
import { requireDashboardRoute } from '../../../lib/permissions';

interface DashboardRole {
  id: string;
  code: string;
  name: string;
  permissions?: unknown[];
}

export default async function Roles() {
  const gate = await requireDashboardRoute('/roles');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;
  const roles = (await dashboardApi<DashboardRole[]>('/roles')) ?? [];

  return (
    <div className="stack">
      <PageHeader title="Roles" eyebrow="System role bags" />
      <div className="card">
        {roles.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead><tr><th>Role</th><th>Code</th><th>Permissions</th></tr></thead>
              <tbody>
                {roles.map((role) => (
                  <tr key={role.id}>
                    <td>{role.name}</td>
                    <td className="mono">{role.code}</td>
                    <td>{role.permissions?.length ?? 0}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No roles returned" body="System roles are loaded from the API seed catalog." />
        )}
      </div>
    </div>
  );
}