import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import { AdminActionIconButton, AdminRowActions } from "@/shared/ui/AdminListLayout.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { createTextColumnFilter } from "@/shared/ui/tableFilters.js";

export function RoleTable({ abilities, onEdit, onQueryChange, onRemove, pagination, query, roles }) {
  const columns = [
    {
      key: "name",
      label: "角色",
      width: "minmax(160px, 1fr)",
      filter: createTextColumnFilter({
        placeholder: "搜索角色、编码",
        value: query,
        onChange: onQueryChange
      })
    },
    { key: "code", label: "编码", width: "minmax(180px, 1.2fr)", render: (role) => <span className="muted">{role.code}</span> },
    { key: "permissionCount", label: "权限数量", width: "110px", render: (role) => role.permissions?.length || 0 },
    {
      key: "description",
      label: "说明",
      width: "minmax(240px, 1.6fr)",
      render: (role) => <span className="muted">{role.description || "-"}</span>
    },
    {
      key: "actions",
      label: "操作",
      width: "120px",
      render: (role) => (
        <AdminRowActions>
          {abilities.canUpdate || abilities.canGrant ? (
            <AdminActionIconButton label="编辑" onClick={() => onEdit(role)}>
              <EditOutlined fontSize="inherit" />
            </AdminActionIconButton>
          ) : null}
          {abilities.canDelete ? (
            <AdminActionIconButton label="删除" tone="danger" onClick={() => onRemove(role)}>
              <DeleteOutlineOutlined fontSize="inherit" />
            </AdminActionIconButton>
          ) : null}
        </AdminRowActions>
      )
    }
  ];

  return (
    <DataTable columns={columns} items={roles} minWidth="920px" pagination={pagination} rowKey={(role) => role.id} />
  );
}
