import { Badge, 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 (
    <div className="space-y-6">
      <DescriptionCard
        data={role}
        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",
              },
            },
          },
          { type: "divider" },
          {
            key: "createdAt",
            label: "Created At",
            type: "date",
            meta: { dateFormat: "medium" },
          },
          {
            key: "updatedAt",
            label: "Updated At",
            type: "date",
            meta: { dateFormat: "relative" },
          },
        ]}
      />
      <div className="rounded-lg border p-4">
        <h3 className="mb-3 text-sm font-medium">Permissions</h3>
        {permissions.length === 0 ? (
          <p className="text-sm text-muted-foreground">No permissions assigned.</p>
        ) : (
          <div className="flex flex-wrap gap-2">
            {permissions.map((p) => (
              <Badge key={p}>{p}</Badge>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};
