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

export const UserDetailFragment = graphql(`
  fragment UserDetail on User {
    id
    name
    email
    status
    createdAt
    updatedAt
    userRoles {
      edges {
        node {
          id
          role {
            id
            name
          }
        }
      }
    }
  }
`);

interface UserDetailProps {
  user: FragmentOf<typeof UserDetailFragment>;
}

export const UserDetail = ({ user: userFragment }: UserDetailProps) => {
  const user = readFragment(UserDetailFragment, userFragment);
  const roleNames = user.userRoles.edges
    .map((edge) => edge.node.role?.name)
    .filter((name): name is string => name != null);

  return (
    <DescriptionCard
      data={{ ...user, roleNames }}
      title="User Information"
      columns={3}
      fields={[
        { key: "name", label: "Name" },
        { key: "email", label: "Email", meta: { copyable: true } },
        {
          key: "status",
          label: "Status",
          type: "badge",
          meta: {
            badgeVariantMap: {
              ACTIVE: "success",
              PENDING: "info",
              INACTIVE: "neutral",
            },
          },
        },
        {
          key: "roleNames",
          label: "Roles",
          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" },
        },
      ]}
    />
  );
};
