import { Badge, 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 roles = user.userRoles.edges.map((edge) => edge.node);

  return (
    <div className="space-y-4">
      <DescriptionCard
        data={user}
        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: "warning",
                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">Assigned Roles</h3>
        {roles.length > 0 ? (
          <div className="flex flex-wrap gap-2">
            {roles.map((userRole) => (
              <Badge key={userRole.id}>{userRole.role?.name ?? "-"}</Badge>
            ))}
          </div>
        ) : (
          <p className="text-muted-foreground text-sm">No roles assigned</p>
        )}
      </div>
    </div>
  );
};
