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

export const CategoryDetailFragment = graphql(`
  fragment CategoryDetail on ProductCategory {
    id
    name
    code
    parent {
      id
      name
    }
    createdAt
    updatedAt
    productCategoryAssignments {
      edges {
        node {
          id
          productId
        }
      }
    }
  }
`);

interface CategoryDetailProps {
  category: FragmentOf<typeof CategoryDetailFragment>;
}

export const CategoryDetail = ({ category: categoryFragment }: CategoryDetailProps) => {
  const category = readFragment(CategoryDetailFragment, categoryFragment);

  const assignedProductCount = category.productCategoryAssignments?.edges?.length ?? 0;

  const displayData = {
    ...category,
    parentName: category.parent?.name ?? "—",
  };

  return (
    <div className="flex flex-col gap-4">
      <DescriptionCard
        data={displayData}
        title="Category Information"
        columns={3}
        fields={[
          { key: "name", label: "Name" },
          { key: "code", label: "Code", meta: { copyable: true } },
          { key: "parentName", label: "Parent" },
          { 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-md border p-4 text-sm">
        <p className="mb-1 font-medium">Assigned Products</p>
        <p className="text-muted-foreground">
          {assignedProductCount} product{assignedProductCount !== 1 ? "s" : ""} assigned
        </p>
      </div>
    </div>
  );
};
