import { DescriptionCard } from "@tailor-platform/app-shell";
import { graphql, type FragmentOf, readFragment } from "@/graphql";

export const RoleDetailFragment = graphql(`
  fragment RoleDetail on Role {
    id
    name
    description
    status
    permissions
    createdAt
    updatedAt
  }
`);

interface RoleDetailProps {
  role: FragmentOf<typeof RoleDetailFragment>;
}

export const RoleDetail = ({ role: roleFragment }: RoleDetailProps) => {
  const role = readFragment(RoleDetailFragment, roleFragment);
  const permissions = [...(role.permissions ?? [])].sort();

  return (
    <DescriptionCard
      data={{ ...role, permissions }}
      title="Role Information"
      columns={3}
      fields={[
        { key: "name", label: "Name" },
        { key: "description", label: "Description" },
        {
          key: "status",
          label: "Status",
          type: "badge",
          meta: {
            badgeVariantMap: {
              ACTIVE: "success",
              INACTIVE: "neutral",
            },
          },
        },
        {
          key: "permissions",
          label: "Permissions",
          type: "badge",
          meta: { sentenceCaseBadges: false, maxVisible: 6 },
        },
        { type: "divider" },
        {
          key: "createdAt",
          label: "Created At",
          type: "date",
          meta: { dateFormat: "medium" },
        },
        {
          key: "updatedAt",
          label: "Updated At",
          type: "date",
          meta: { dateFormat: "relative" },
        },
      ]}
    />
  );
};
