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

export const AttributeDetailFragment = graphql(`
  fragment AttributeDetail on ProductAttribute {
    id
    name
    code
    createdAt
    updatedAt
    productAttributeValues {
      edges {
        node {
          id
          label
        }
      }
    }
  }
`);

interface AttributeDetailProps {
  attribute: FragmentOf<typeof AttributeDetailFragment>;
}

export const AttributeDetail = ({ attribute: attributeFragment }: AttributeDetailProps) => {
  const attribute = readFragment(AttributeDetailFragment, attributeFragment);

  const values = attribute.productAttributeValues?.edges?.map((e) => e.node) ?? [];

  return (
    <div className="space-y-4">
      <DescriptionCard
        data={attribute}
        title="Attribute Information"
        columns={3}
        fields={[
          { key: "name", label: "Name" },
          { key: "code", label: "Code", meta: { copyable: true } },
          { 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">Values</h3>
        {values.length > 0 ? (
          <div className="flex flex-wrap gap-2">
            {values.map((v) => (
              <Badge key={v.id}>{v.label}</Badge>
            ))}
          </div>
        ) : (
          <p className="text-muted-foreground text-sm">No values</p>
        )}
      </div>
    </div>
  );
};
