pn-new-crm/src/components/admin/roles/role-list.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { type ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash2, Plus, Lock } from 'lucide-react';

import { DataTable } from '@/components/shared/data-table';
import { PageHeader } from '@/components/shared/page-header';
import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { apiFetch } from '@/lib/api/client';
import { RoleForm } from './role-form';

interface Role {
  id: string;
  name: string;
  description: string | null;
  isSystem: boolean;
  isGlobal: boolean;
  permissions: Record<string, Record<string, boolean>>;
  createdAt: string;
}

export function RoleList() {
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(true);
  const [formOpen, setFormOpen] = useState(false);
  const [editingRole, setEditingRole] = useState<Role | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);

  const fetchRoles = useCallback(async () => {
    setLoading(true);
    try {
      const res = await apiFetch<{ data: Role[] }>('/api/v1/admin/roles');
      setRoles(res.data);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void fetchRoles();
  }, [fetchRoles]);

  function handleNewRole() {
    setEditingRole(null);
    setFormOpen(true);
  }

  function handleEditRole(role: Role) {
    setEditingRole(role);
    setFormOpen(true);
  }

  async function handleDeleteRole(id: string) {
    setDeletingId(id);
    try {
      await apiFetch(`/api/v1/admin/roles/${id}`, { method: 'DELETE' });
      await fetchRoles();
    } finally {
      setDeletingId(null);
    }
  }

  function countPermissions(perms: Record<string, Record<string, boolean>>): string {
    let granted = 0;
    let total = 0;
    for (const group of Object.values(perms)) {
      for (const val of Object.values(group)) {
        total++;
        if (val) granted++;
      }
    }
    return `${granted}/${total}`;
  }

  const columns: ColumnDef<Role, unknown>[] = [
    {
      accessorKey: 'name',
      header: 'Name',
      cell: ({ row }) => (
        <div className="flex items-center gap-2">
          <span className="font-medium">{row.original.name}</span>
          {row.original.isSystem && (
            <Badge variant="outline" className="text-xs">
              <Lock className="mr-1 h-3 w-3" />
              System
            </Badge>
          )}
        </div>
      ),
    },
    {
      accessorKey: 'description',
      header: 'Description',
      cell: ({ row }) => (
        <span className="text-muted-foreground text-sm">{row.original.description ?? '—'}</span>
      ),
    },
    {
      id: 'permissions',
      header: 'Permissions',
      cell: ({ row }) => (
        <Badge variant="secondary">{countPermissions(row.original.permissions)}</Badge>
      ),
    },
    {
      id: 'actions',
      header: '',
      cell: ({ row }) => (
        <div className="flex items-center justify-end gap-1">
          <Button variant="ghost" size="sm" onClick={() => handleEditRole(row.original)}>
            <Pencil className="h-4 w-4" />
            <span className="sr-only">Edit</span>
          </Button>
          {!row.original.isSystem && (
            <ConfirmationDialog
              trigger={
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-destructive hover:text-destructive"
                >
                  <Trash2 className="h-4 w-4" />
                  <span className="sr-only">Delete</span>
                </Button>
              }
              title="Delete Role"
              description={`Delete "${row.original.name}"? Users assigned to this role must be reassigned first.`}
              confirmLabel="Delete"
              onConfirm={() => handleDeleteRole(row.original.id)}
              loading={deletingId === row.original.id}
            />
          )}
        </div>
      ),
      enableSorting: false,
      size: 80,
    },
  ];

  return (
    <div>
      <PageHeader
        title="Role Management"
        description="Manage roles and their permissions"
        actions={
          <Button onClick={handleNewRole}>
            <Plus className="mr-1.5 h-4 w-4" />
            New Role
          </Button>
        }
      />

      <DataTable
        columns={columns}
        data={roles}
        isLoading={loading}
        getRowId={(row) => row.id}
        emptyState={
          <div className="text-center py-8">
            <p className="text-muted-foreground">No roles defined.</p>
          </div>
        }
      />

      <RoleForm
        open={formOpen}
        onOpenChange={setFormOpen}
        role={editingRole}
        onSuccess={fetchRoles}
      />
    </div>
  );
}