@hed-hog/catalog 0.0.294 → 0.0.295

package/hedhog/frontend/app/_components/catalog-resource-form-sheet.tsx.ejs

@@ -1,8 +1,8 @@
 'use client';
 
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
@@ -52,54 +52,54 @@ import Image from 'next/image';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { z } from 'zod';
-import { CatalogAiFormAssistDialog } from './catalog-ai-form-assist-dialog';
-import {
-  catalogResourceMap,
-  getCatalogLocalizedText,
-  getCatalogRecordLabel,
+import { z } from 'zod';
+import { CatalogAiFormAssistDialog } from './catalog-ai-form-assist-dialog';
+import {
+  catalogResourceMap,
+  getCatalogLocalizedText,
+  getCatalogRecordLabel,
   type CatalogFormFieldDefinition,
   type CatalogResourceDefinition,
 } from '../_lib/catalog-resources';
 
-type CatalogRecord = Record<string, unknown>;
-type CatalogFormValues = Record<string, unknown>;
-type RelationOption = { id: number; label: string };
-type ProductAttributeMetadata = CatalogRecord & {
-  id: number;
-  data_type?: string;
-  unit?: string | null;
-  options?: CatalogRecord[];
-  category_attribute?: CatalogRecord;
-};
-type ProductAttributeDraft = {
-  attribute_id: number;
-  data_type: string;
-  attribute_option_id: number | null;
-  value_text: string;
-  value_number: number | null;
-  value_boolean: boolean | null;
-  value_unit: string;
-  source_type: string;
-  confidence_score: number | null;
-  is_verified: boolean;
-};
-type CatalogAttributePayload = {
-  category?: CatalogRecord;
-  groups?: Array<{
-    id: number | null;
-    name: string;
-    slug: string;
-    attributes: Array<
-      CatalogRecord & {
-        options?: CatalogRecord[];
-        value?: CatalogRecord | null;
-        category_attribute?: CatalogRecord;
-      }
-    >;
-  }>;
-};
-type FormSheetProps = {
+type CatalogRecord = Record<string, unknown>;
+type CatalogFormValues = Record<string, unknown>;
+type RelationOption = { id: number; label: string };
+type ProductAttributeMetadata = CatalogRecord & {
+  id: number;
+  data_type?: string;
+  unit?: string | null;
+  options?: CatalogRecord[];
+  category_attribute?: CatalogRecord;
+};
+type ProductAttributeDraft = {
+  attribute_id: number;
+  data_type: string;
+  attribute_option_id: number | null;
+  value_text: string;
+  value_number: number | null;
+  value_boolean: boolean | null;
+  value_unit: string;
+  source_type: string;
+  confidence_score: number | null;
+  is_verified: boolean;
+};
+type CatalogAttributePayload = {
+  category?: CatalogRecord;
+  groups?: Array<{
+    id: number | null;
+    name: string;
+    slug: string;
+    attributes: Array<
+      CatalogRecord & {
+        options?: CatalogRecord[];
+        value?: CatalogRecord | null;
+        category_attribute?: CatalogRecord;
+      }
+    >;
+  }>;
+};
+type FormSheetProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   resource: string;
@@ -246,10 +246,10 @@ function serializeInitialValue(
   return rawValue === null || rawValue === undefined ? '' : String(rawValue);
 }
 
-function buildDefaultValues(
-  resourceConfig: CatalogResourceDefinition,
-  payload: CatalogRecord
-) {
+function buildDefaultValues(
+  resourceConfig: CatalogResourceDefinition,
+  payload: CatalogRecord
+) {
   const defaults: CatalogFormValues = {};
 
   for (const section of resourceConfig.formSections) {
@@ -258,27 +258,27 @@ function buildDefaultValues(
     }
   }
 
-  return defaults;
-}
-
-function buildCurrentFormPayload(
-  resourceConfig: CatalogResourceDefinition,
-  values: CatalogFormValues,
-) {
-  const payload: CatalogRecord = {};
-
-  for (const section of resourceConfig.formSections) {
-    for (const field of section.fields) {
-      try {
-        payload[field.key] = normalizeSubmitValue(field, values[field.key]);
-      } catch {
-        payload[field.key] = values[field.key] ?? null;
-      }
-    }
-  }
-
-  return payload;
-}
+  return defaults;
+}
+
+function buildCurrentFormPayload(
+  resourceConfig: CatalogResourceDefinition,
+  values: CatalogFormValues,
+) {
+  const payload: CatalogRecord = {};
+
+  for (const section of resourceConfig.formSections) {
+    for (const field of section.fields) {
+      try {
+        payload[field.key] = normalizeSubmitValue(field, values[field.key]);
+      } catch {
+        payload[field.key] = values[field.key] ?? null;
+      }
+    }
+  }
+
+  return payload;
+}
 
 function normalizeSubmitValue(
   field: CatalogFormFieldDefinition,
@@ -323,227 +323,227 @@ function normalizeSubmitValue(
     return String(rawValue || '').trim() || null;
   }
 
-  return rawValue;
-}
-
-function buildAttributeDrafts(payload?: CatalogAttributePayload | null) {
-  const drafts: Record<number, ProductAttributeDraft> = {};
-
-  for (const group of payload?.groups ?? []) {
-    for (const attribute of group.attributes ?? []) {
-      const attributeId = Number(attribute.id ?? 0);
-      const value = (attribute.value ?? null) as CatalogRecord | null;
-
-      if (!attributeId) {
-        continue;
-      }
-
-      drafts[attributeId] = {
-        attribute_id: attributeId,
-        data_type: String(attribute.data_type ?? 'text'),
-        attribute_option_id:
-          value?.attribute_option_id === null ||
-          value?.attribute_option_id === undefined
-            ? null
-            : Number(value.attribute_option_id),
-        value_text: String(value?.value_text ?? ''),
-        value_number:
-          value?.value_number === null || value?.value_number === undefined
-            ? null
-            : Number(value.value_number),
-        value_boolean:
-          typeof value?.value_boolean === 'boolean' ? value.value_boolean : null,
-        value_unit: String(value?.value_unit ?? attribute.unit ?? ''),
-        source_type: String(value?.source_type ?? 'manual'),
-        confidence_score:
-          value?.confidence_score === null ||
-          value?.confidence_score === undefined
-            ? null
-            : Number(value.confidence_score),
-        is_verified: Boolean(value?.is_verified ?? false),
-      };
-    }
-  }
-
-  return drafts;
-}
-
-function createEmptyProductAttributeDraft(
-  attributeId: number,
-  dataType = 'text',
-  unit = '',
-): ProductAttributeDraft {
-  return {
-    attribute_id: attributeId,
-    data_type: dataType,
-    attribute_option_id: null,
-    value_text: '',
-    value_number: null,
-    value_boolean: null,
-    value_unit: unit,
-    source_type: 'manual',
-    confidence_score: null,
-    is_verified: false,
-  };
-}
-
-function normalizeProductAttributeDraft(
-  attribute: ProductAttributeMetadata,
-  draft?: ProductAttributeDraft,
-) {
-  const dataType = String(attribute.data_type ?? draft?.data_type ?? 'text');
-  const normalized = {
-    ...(draft ?? createEmptyProductAttributeDraft(Number(attribute.id), dataType, String(attribute.unit ?? ''))),
-    attribute_id: Number(attribute.id),
-    data_type: dataType,
-    value_unit: String(draft?.value_unit ?? attribute.unit ?? ''),
-  } satisfies ProductAttributeDraft;
-
-  if (dataType === 'option') {
-    return {
-      ...normalized,
-      value_text: '',
-      value_number: null,
-      value_boolean: null,
-      value_unit: '',
-    };
-  }
-
-  if (dataType === 'number') {
-    return {
-      ...normalized,
-      attribute_option_id: null,
-      value_text: '',
-      value_boolean: null,
-    };
-  }
-
-  if (dataType === 'boolean') {
-    return {
-      ...normalized,
-      attribute_option_id: null,
-      value_text: '',
-      value_number: null,
-      value_unit: '',
-    };
-  }
-
-  return {
-    ...normalized,
-    attribute_option_id: null,
-    value_number: null,
-    value_boolean: null,
-    value_unit: dataType === 'text' || dataType === 'long_text' ? '' : normalized.value_unit,
-  };
-}
-
-function hasMeaningfulProductAttributeValue(
-  attribute: ProductAttributeMetadata,
-  draft: ProductAttributeDraft,
-) {
-  const dataType = String(attribute.data_type ?? draft.data_type ?? 'text');
-
-  if (dataType === 'option') {
-    return draft.attribute_option_id !== null && draft.attribute_option_id !== undefined;
-  }
-
-  if (dataType === 'number') {
-    return draft.value_number !== null && draft.value_number !== undefined;
-  }
-
-  if (dataType === 'boolean') {
-    return draft.value_boolean !== null && draft.value_boolean !== undefined;
-  }
-
-  return String(draft.value_text ?? '').trim().length > 0;
-}
-
-function buildProductAttributeSubmission(
-  payload: CatalogAttributePayload | null,
-  drafts: Record<number, ProductAttributeDraft>,
-  localeCode?: string | null,
-) {
-  const errors: Record<number, string> = {};
-  const values: Array<Record<string, unknown>> = [];
-  const isPt = localeCode?.startsWith('pt');
-
-  for (const group of payload?.groups ?? []) {
-    for (const attribute of group.attributes as ProductAttributeMetadata[]) {
-      const attributeId = Number(attribute.id ?? 0);
-
-      if (!attributeId) {
-        continue;
-      }
-
-      const normalized = normalizeProductAttributeDraft(attribute, drafts[attributeId]);
-      const hasValue = hasMeaningfulProductAttributeValue(attribute, normalized);
-      const relation = (attribute.category_attribute ?? {}) as CatalogRecord;
-      const optionIds = new Set(
-        (attribute.options ?? [])
-          .map((option) => Number(option.id ?? 0))
-          .filter((value) => value > 0),
-      );
-      const attributeLabel = String(
-        attribute.name ?? attribute.label ?? attribute.slug ?? `#${attributeId}`,
-      );
-
-      if (
-        normalized.attribute_option_id !== null &&
-        normalized.attribute_option_id !== undefined &&
-        !optionIds.has(Number(normalized.attribute_option_id))
-      ) {
-        errors[attributeId] = isPt
-          ? `Selecione uma opção válida para ${attributeLabel}.`
-          : `Select a valid option for ${attributeLabel}.`;
-        continue;
-      }
-
-      if (relation.is_required === true && !hasValue) {
-        errors[attributeId] = isPt
-          ? `${attributeLabel} é obrigatório para esta categoria.`
-          : `${attributeLabel} is required for this category.`;
-        continue;
-      }
-
-      if (!hasValue) {
-        continue;
-      }
-
-      values.push({
-        attribute_id: attributeId,
-        attribute_option_id: normalized.attribute_option_id,
-        value_text: String(normalized.value_text ?? '').trim() || null,
-        value_number: normalized.value_number,
-        value_boolean: normalized.value_boolean,
-        value_unit: String(normalized.value_unit ?? '').trim() || null,
-        source_type: normalized.source_type,
-        confidence_score: normalized.confidence_score,
-        is_verified: normalized.is_verified,
-      });
-    }
-  }
-
-  return {
-    errors,
-    values,
-  };
-}
-
-function buildCurrentProductAttributeValues(
-  drafts: Record<number, ProductAttributeDraft>,
-) {
-  return Object.values(drafts).map((draft) => ({
-    attribute_id: draft.attribute_id,
-    attribute_option_id: draft.attribute_option_id,
-    value_text: draft.value_text,
-    value_number: draft.value_number,
-    value_boolean: draft.value_boolean,
-    value_unit: draft.value_unit,
-    source_type: draft.source_type,
-    confidence_score: draft.confidence_score,
-    is_verified: draft.is_verified,
-  }));
-}
+  return rawValue;
+}
+
+function buildAttributeDrafts(payload?: CatalogAttributePayload | null) {
+  const drafts: Record<number, ProductAttributeDraft> = {};
+
+  for (const group of payload?.groups ?? []) {
+    for (const attribute of group.attributes ?? []) {
+      const attributeId = Number(attribute.id ?? 0);
+      const value = (attribute.value ?? null) as CatalogRecord | null;
+
+      if (!attributeId) {
+        continue;
+      }
+
+      drafts[attributeId] = {
+        attribute_id: attributeId,
+        data_type: String(attribute.data_type ?? 'text'),
+        attribute_option_id:
+          value?.attribute_option_id === null ||
+          value?.attribute_option_id === undefined
+            ? null
+            : Number(value.attribute_option_id),
+        value_text: String(value?.value_text ?? ''),
+        value_number:
+          value?.value_number === null || value?.value_number === undefined
+            ? null
+            : Number(value.value_number),
+        value_boolean:
+          typeof value?.value_boolean === 'boolean' ? value.value_boolean : null,
+        value_unit: String(value?.value_unit ?? attribute.unit ?? ''),
+        source_type: String(value?.source_type ?? 'manual'),
+        confidence_score:
+          value?.confidence_score === null ||
+          value?.confidence_score === undefined
+            ? null
+            : Number(value.confidence_score),
+        is_verified: Boolean(value?.is_verified ?? false),
+      };
+    }
+  }
+
+  return drafts;
+}
+
+function createEmptyProductAttributeDraft(
+  attributeId: number,
+  dataType = 'text',
+  unit = '',
+): ProductAttributeDraft {
+  return {
+    attribute_id: attributeId,
+    data_type: dataType,
+    attribute_option_id: null,
+    value_text: '',
+    value_number: null,
+    value_boolean: null,
+    value_unit: unit,
+    source_type: 'manual',
+    confidence_score: null,
+    is_verified: false,
+  };
+}
+
+function normalizeProductAttributeDraft(
+  attribute: ProductAttributeMetadata,
+  draft?: ProductAttributeDraft,
+) {
+  const dataType = String(attribute.data_type ?? draft?.data_type ?? 'text');
+  const normalized = {
+    ...(draft ?? createEmptyProductAttributeDraft(Number(attribute.id), dataType, String(attribute.unit ?? ''))),
+    attribute_id: Number(attribute.id),
+    data_type: dataType,
+    value_unit: String(draft?.value_unit ?? attribute.unit ?? ''),
+  } satisfies ProductAttributeDraft;
+
+  if (dataType === 'option') {
+    return {
+      ...normalized,
+      value_text: '',
+      value_number: null,
+      value_boolean: null,
+      value_unit: '',
+    };
+  }
+
+  if (dataType === 'number') {
+    return {
+      ...normalized,
+      attribute_option_id: null,
+      value_text: '',
+      value_boolean: null,
+    };
+  }
+
+  if (dataType === 'boolean') {
+    return {
+      ...normalized,
+      attribute_option_id: null,
+      value_text: '',
+      value_number: null,
+      value_unit: '',
+    };
+  }
+
+  return {
+    ...normalized,
+    attribute_option_id: null,
+    value_number: null,
+    value_boolean: null,
+    value_unit: dataType === 'text' || dataType === 'long_text' ? '' : normalized.value_unit,
+  };
+}
+
+function hasMeaningfulProductAttributeValue(
+  attribute: ProductAttributeMetadata,
+  draft: ProductAttributeDraft,
+) {
+  const dataType = String(attribute.data_type ?? draft.data_type ?? 'text');
+
+  if (dataType === 'option') {
+    return draft.attribute_option_id !== null && draft.attribute_option_id !== undefined;
+  }
+
+  if (dataType === 'number') {
+    return draft.value_number !== null && draft.value_number !== undefined;
+  }
+
+  if (dataType === 'boolean') {
+    return draft.value_boolean !== null && draft.value_boolean !== undefined;
+  }
+
+  return String(draft.value_text ?? '').trim().length > 0;
+}
+
+function buildProductAttributeSubmission(
+  payload: CatalogAttributePayload | null,
+  drafts: Record<number, ProductAttributeDraft>,
+  localeCode?: string | null,
+) {
+  const errors: Record<number, string> = {};
+  const values: Array<Record<string, unknown>> = [];
+  const isPt = localeCode?.startsWith('pt');
+
+  for (const group of payload?.groups ?? []) {
+    for (const attribute of group.attributes as ProductAttributeMetadata[]) {
+      const attributeId = Number(attribute.id ?? 0);
+
+      if (!attributeId) {
+        continue;
+      }
+
+      const normalized = normalizeProductAttributeDraft(attribute, drafts[attributeId]);
+      const hasValue = hasMeaningfulProductAttributeValue(attribute, normalized);
+      const relation = (attribute.category_attribute ?? {}) as CatalogRecord;
+      const optionIds = new Set(
+        (attribute.options ?? [])
+          .map((option) => Number(option.id ?? 0))
+          .filter((value) => value > 0),
+      );
+      const attributeLabel = String(
+        attribute.name ?? attribute.label ?? attribute.slug ?? `#${attributeId}`,
+      );
+
+      if (
+        normalized.attribute_option_id !== null &&
+        normalized.attribute_option_id !== undefined &&
+        !optionIds.has(Number(normalized.attribute_option_id))
+      ) {
+        errors[attributeId] = isPt
+          ? `Selecione uma opção válida para ${attributeLabel}.`
+          : `Select a valid option for ${attributeLabel}.`;
+        continue;
+      }
+
+      if (relation.is_required === true && !hasValue) {
+        errors[attributeId] = isPt
+          ? `${attributeLabel} é obrigatório para esta categoria.`
+          : `${attributeLabel} is required for this category.`;
+        continue;
+      }
+
+      if (!hasValue) {
+        continue;
+      }
+
+      values.push({
+        attribute_id: attributeId,
+        attribute_option_id: normalized.attribute_option_id,
+        value_text: String(normalized.value_text ?? '').trim() || null,
+        value_number: normalized.value_number,
+        value_boolean: normalized.value_boolean,
+        value_unit: String(normalized.value_unit ?? '').trim() || null,
+        source_type: normalized.source_type,
+        confidence_score: normalized.confidence_score,
+        is_verified: normalized.is_verified,
+      });
+    }
+  }
+
+  return {
+    errors,
+    values,
+  };
+}
+
+function buildCurrentProductAttributeValues(
+  drafts: Record<number, ProductAttributeDraft>,
+) {
+  return Object.values(drafts).map((draft) => ({
+    attribute_id: draft.attribute_id,
+    attribute_option_id: draft.attribute_option_id,
+    value_text: draft.value_text,
+    value_number: draft.value_number,
+    value_boolean: draft.value_boolean,
+    value_unit: draft.value_unit,
+    source_type: draft.source_type,
+    confidence_score: draft.confidence_score,
+    is_verified: draft.is_verified,
+  }));
+}
 
 function extractRecordId(record: CatalogRecord) {
   return Number(record.id ?? record.category_id ?? record.content_id ?? 0);
@@ -779,7 +779,7 @@ function CatalogRelationField({
   );
 }
 
-function CatalogUploadField({
+function CatalogUploadField({
   field,
   value,
   onChange,
@@ -932,387 +932,387 @@ function CatalogUploadField({
 
       {isUploading ? <Progress value={progress} /> : null}
     </div>
-  );
-}
-
-function ProductAttributesSection({
-  open,
-  recordId,
-  categoryId,
-  initialCategoryId,
-  values,
-  onChange,
-  errors,
-  onSchemaChange,
-}: {
-  open: boolean;
-  recordId: number | null;
-  categoryId: number | null;
-  initialCategoryId: number | null;
-  values: Record<number, ProductAttributeDraft>;
-  onChange: (next: Record<number, ProductAttributeDraft>) => void;
-  errors: Record<number, string>;
-  onSchemaChange: (payload: CatalogAttributePayload | null) => void;
-}) {
-  const { request, currentLocaleCode } = useApp();
-  const loadExistingValues =
-    Boolean(recordId) && categoryId !== null && categoryId === initialCategoryId;
-
-  const { data, isLoading } = useQuery<CatalogAttributePayload | null>({
-    queryKey: [
-      'catalog-product-attributes-editor',
-      recordId,
-      categoryId,
-      initialCategoryId,
-    ],
-    queryFn: async () => {
-      if (!categoryId) {
-        return null;
-      }
-
-      const response = await request({
-        url: loadExistingValues
-          ? `/catalog/products/${recordId}/attributes`
-          : `/catalog/categories/${categoryId}/attributes`,
-        method: 'GET',
-      });
-
-      return (response.data ?? null) as CatalogAttributePayload | null;
-    },
-    enabled: open && Boolean(categoryId),
-  });
-
-  useEffect(() => {
-    onSchemaChange(data ?? null);
-  }, [data, onSchemaChange]);
-
-  useEffect(() => {
-    if (!categoryId) {
-      onSchemaChange(null);
-      onChange({});
-      return;
-    }
-
-    onChange(buildAttributeDrafts(data));
-  }, [categoryId, data, onChange, onSchemaChange]);
-
-  const updateDraft = (attributeId: number, patch: Partial<ProductAttributeDraft>) => {
-    const baseDraft = values[attributeId] ?? createEmptyProductAttributeDraft(attributeId);
-    onChange({
-      ...values,
-      [attributeId]: {
-        ...baseDraft,
-        ...patch,
-      },
-    });
-  };
-
-  if (!categoryId) {
-    return (
-      <section className="space-y-2 rounded-xl border border-dashed p-4">
-        <h3 className="text-sm font-semibold">
-          {currentLocaleCode?.startsWith('pt')
-            ? 'Atributos estruturados'
-            : 'Structured attributes'}
-        </h3>
-        <p className="text-sm text-muted-foreground">
-          {currentLocaleCode?.startsWith('pt')
-            ? 'Selecione uma categoria para carregar os atributos do produto.'
-            : 'Select a category to load the product attributes.'}
-        </p>
-      </section>
-    );
-  }
-
-  return (
-    <section className="space-y-4 rounded-xl border bg-muted/10 p-4">
-      <div className="space-y-1">
-        <h3 className="text-sm font-semibold">
-          {currentLocaleCode?.startsWith('pt')
-            ? 'Atributos estruturados'
-            : 'Structured attributes'}
-        </h3>
-        <p className="text-sm text-muted-foreground">
-          {currentLocaleCode?.startsWith('pt')
-            ? 'A categoria define os campos comparáveis e filtráveis do produto.'
-            : 'The category defines the product fields used for comparison and filters.'}
-        </p>
-      </div>
-
-      {isLoading ? (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          {currentLocaleCode?.startsWith('pt')
-            ? 'Carregando atributos...'
-            : 'Loading attributes...'}
-        </div>
-      ) : !(data?.groups?.length) ? (
-        <p className="text-sm text-muted-foreground">
-          {currentLocaleCode?.startsWith('pt')
-            ? 'Nenhum atributo configurado para esta categoria.'
-            : 'No attributes configured for this category.'}
-        </p>
-      ) : (
-        data.groups.map((group) => (
-          <div key={`${group.slug}-${group.id ?? 'general'}`} className="space-y-3">
-            <div>
-              <h4 className="text-sm font-medium">{group.name}</h4>
-            </div>
-
-            <div className="grid gap-4">
-              {group.attributes.map((attribute) => {
-                const attributeId = Number(attribute.id);
-                const draft = normalizeProductAttributeDraft(
-                  attribute as ProductAttributeMetadata,
-                  values[attributeId],
-                );
-                const dataType = String(attribute.data_type ?? 'text');
-                const relation = (attribute.category_attribute ?? {}) as CatalogRecord;
-                const attributeBadges = [
-                  relation.is_required
-                    ? currentLocaleCode?.startsWith('pt')
-                      ? 'Obrigatório'
-                      : 'Required'
-                    : null,
-                  relation.is_highlight
-                    ? currentLocaleCode?.startsWith('pt')
-                      ? 'Destaque'
-                      : 'Highlight'
-                    : null,
-                  relation.is_filter_visible
-                    ? currentLocaleCode?.startsWith('pt')
-                      ? 'Filtro'
-                      : 'Filter'
-                    : null,
-                  relation.is_comparison_visible
-                    ? currentLocaleCode?.startsWith('pt')
-                      ? 'Comparação'
-                      : 'Comparison'
-                    : null,
-                ].filter((item): item is string => Boolean(item));
-
-                return (
-                  <div key={attributeId} className="rounded-lg border bg-background p-3">
-                    <div className="mb-3 space-y-1">
-                      <div className="flex items-center justify-between gap-3">
-                        <div className="space-y-1">
-                          <div className="font-medium">
-                            {String(attribute.name ?? attribute.label ?? attribute.slug)}
-                            {relation.is_required ? (
-                              <span className="ml-1 text-destructive">*</span>
-                            ) : null}
-                          </div>
-                          {attributeBadges.length ? (
-                            <div className="flex flex-wrap gap-2">
-                              {attributeBadges.map((badge) => (
-                                <Badge key={`${attributeId}-${badge}`} variant="secondary">
-                                  {badge}
-                                </Badge>
-                              ))}
-                            </div>
-                          ) : null}
-                        </div>
-                        {attribute.unit ? (
-                          <span className="text-xs text-muted-foreground">
-                            {String(attribute.unit)}
-                          </span>
-                        ) : null}
-                      </div>
-                      {attribute.description ? (
-                        <p className="text-xs text-muted-foreground">
-                          {String(attribute.description)}
-                        </p>
-                      ) : null}
-                      {errors[attributeId] ? (
-                        <p className="text-xs font-medium text-destructive">
-                          {errors[attributeId]}
-                        </p>
-                      ) : null}
-                    </div>
-
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      {dataType === 'option' ? (
-                        <div className="space-y-2 sm:col-span-2">
-                          <FormLabel>
-                            {currentLocaleCode?.startsWith('pt') ? 'Opção' : 'Option'}
-                          </FormLabel>
-                          <Select
-                            value={
-                              draft?.attribute_option_id
-                                ? String(draft.attribute_option_id)
-                                : ''
-                            }
-                            onValueChange={(next) =>
-                              updateDraft(attributeId, {
-                                data_type: dataType,
-                                attribute_option_id: next ? Number(next) : null,
-                              })
-                            }
-                          >
-                            <SelectTrigger>
-                              <SelectValue
-                                placeholder={
-                                  currentLocaleCode?.startsWith('pt')
-                                    ? 'Selecione uma opção'
-                                    : 'Select an option'
-                                }
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {(attribute.options ?? []).map((option) => (
-                                <SelectItem key={String(option.id)} value={String(option.id)}>
-                                  {String(option.label ?? option.option_value)}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      ) : null}
-
-                      {dataType === 'text' || dataType === 'long_text' ? (
-                        <div className="space-y-2 sm:col-span-2">
-                          <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Valor' : 'Value'}</FormLabel>
-                          {dataType === 'long_text' ? (
-                            <Textarea
-                              value={draft?.value_text ?? ''}
-                              onChange={(event) =>
-                                updateDraft(attributeId, {
-                                  data_type: dataType,
-                                  value_text: event.target.value,
-                                })
-                              }
-                            />
-                          ) : (
-                            <Input
-                              value={draft?.value_text ?? ''}
-                              onChange={(event) =>
-                                updateDraft(attributeId, {
-                                  data_type: dataType,
-                                  value_text: event.target.value,
-                                })
-                              }
-                            />
-                          )}
-                        </div>
-                      ) : null}
-
-                      {dataType === 'number' ? (
-                        <>
-                          <div className="space-y-2">
-                            <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Número' : 'Number'}</FormLabel>
-                            <Input
-                              type="number"
-                              value={
-                                draft?.value_number === null ||
-                                draft?.value_number === undefined
-                                  ? ''
-                                  : String(draft.value_number)
-                              }
-                              onChange={(event) =>
-                                updateDraft(attributeId, {
-                                  data_type: dataType,
-                                  value_number:
-                                    event.target.value === ''
-                                      ? null
-                                      : Number(event.target.value),
-                                })
-                              }
-                            />
-                          </div>
-                          <div className="space-y-2">
-                            <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Unidade' : 'Unit'}</FormLabel>
-                            <Input
-                              value={draft?.value_unit ?? ''}
-                              onChange={(event) =>
-                                updateDraft(attributeId, {
-                                  data_type: dataType,
-                                  value_unit: event.target.value,
-                                })
-                              }
-                            />
-                          </div>
-                        </>
-                      ) : null}
-
-                      {dataType === 'boolean' ? (
-                        <div className="space-y-2 sm:col-span-2">
-                          <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Valor' : 'Value'}</FormLabel>
-                          <Select
-                            value={
-                              draft?.value_boolean === null ||
-                              draft?.value_boolean === undefined
-                                ? ''
-                                : draft.value_boolean
-                                  ? 'true'
-                                  : 'false'
-                            }
-                            onValueChange={(next) =>
-                              updateDraft(attributeId, {
-                                data_type: dataType,
-                                value_boolean:
-                                  next === ''
-                                    ? null
-                                    : next === 'true',
-                              })
-                            }
-                          >
-                            <SelectTrigger>
-                              <SelectValue
-                                placeholder={
-                                  currentLocaleCode?.startsWith('pt')
-                                    ? 'Selecione um valor'
-                                    : 'Select a value'
-                                }
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="true">
-                                {currentLocaleCode?.startsWith('pt') ? 'Sim' : 'Yes'}
-                              </SelectItem>
-                              <SelectItem value="false">
-                                {currentLocaleCode?.startsWith('pt') ? 'Não' : 'No'}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      ) : null}
-
-                      <div className="flex items-center justify-between rounded-md border px-3 py-2 sm:col-span-2">
-                        <div>
-                          <div className="text-sm font-medium">
-                            {currentLocaleCode?.startsWith('pt')
-                              ? 'Valor verificado'
-                              : 'Verified value'}
-                          </div>
-                          <div className="text-xs text-muted-foreground">
-                            {currentLocaleCode?.startsWith('pt')
-                              ? 'Marque quando o dado já tiver sido validado.'
-                              : 'Enable when the value has been validated.'}
-                          </div>
-                        </div>
-                        <Switch
-                          checked={Boolean(draft?.is_verified)}
-                          onCheckedChange={(checked) =>
-                            updateDraft(attributeId, {
-                              data_type: dataType,
-                              is_verified: checked,
-                            })
-                          }
-                        />
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ))
-      )}
-    </section>
-  );
-}
-
-export function CatalogResourceFormSheet({
+  );
+}
+
+function ProductAttributesSection({
+  open,
+  recordId,
+  categoryId,
+  initialCategoryId,
+  values,
+  onChange,
+  errors,
+  onSchemaChange,
+}: {
+  open: boolean;
+  recordId: number | null;
+  categoryId: number | null;
+  initialCategoryId: number | null;
+  values: Record<number, ProductAttributeDraft>;
+  onChange: (next: Record<number, ProductAttributeDraft>) => void;
+  errors: Record<number, string>;
+  onSchemaChange: (payload: CatalogAttributePayload | null) => void;
+}) {
+  const { request, currentLocaleCode } = useApp();
+  const loadExistingValues =
+    Boolean(recordId) && categoryId !== null && categoryId === initialCategoryId;
+
+  const { data, isLoading } = useQuery<CatalogAttributePayload | null>({
+    queryKey: [
+      'catalog-product-attributes-editor',
+      recordId,
+      categoryId,
+      initialCategoryId,
+    ],
+    queryFn: async () => {
+      if (!categoryId) {
+        return null;
+      }
+
+      const response = await request({
+        url: loadExistingValues
+          ? `/catalog/products/${recordId}/attributes`
+          : `/catalog/categories/${categoryId}/attributes`,
+        method: 'GET',
+      });
+
+      return (response.data ?? null) as CatalogAttributePayload | null;
+    },
+    enabled: open && Boolean(categoryId),
+  });
+
+  useEffect(() => {
+    onSchemaChange(data ?? null);
+  }, [data, onSchemaChange]);
+
+  useEffect(() => {
+    if (!categoryId) {
+      onSchemaChange(null);
+      onChange({});
+      return;
+    }
+
+    onChange(buildAttributeDrafts(data));
+  }, [categoryId, data, onChange, onSchemaChange]);
+
+  const updateDraft = (attributeId: number, patch: Partial<ProductAttributeDraft>) => {
+    const baseDraft = values[attributeId] ?? createEmptyProductAttributeDraft(attributeId);
+    onChange({
+      ...values,
+      [attributeId]: {
+        ...baseDraft,
+        ...patch,
+      },
+    });
+  };
+
+  if (!categoryId) {
+    return (
+      <section className="space-y-2 rounded-xl border border-dashed p-4">
+        <h3 className="text-sm font-semibold">
+          {currentLocaleCode?.startsWith('pt')
+            ? 'Atributos estruturados'
+            : 'Structured attributes'}
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          {currentLocaleCode?.startsWith('pt')
+            ? 'Selecione uma categoria para carregar os atributos do produto.'
+            : 'Select a category to load the product attributes.'}
+        </p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-4 rounded-xl border bg-muted/10 p-4">
+      <div className="space-y-1">
+        <h3 className="text-sm font-semibold">
+          {currentLocaleCode?.startsWith('pt')
+            ? 'Atributos estruturados'
+            : 'Structured attributes'}
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          {currentLocaleCode?.startsWith('pt')
+            ? 'A categoria define os campos comparáveis e filtráveis do produto.'
+            : 'The category defines the product fields used for comparison and filters.'}
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          {currentLocaleCode?.startsWith('pt')
+            ? 'Carregando atributos...'
+            : 'Loading attributes...'}
+        </div>
+      ) : !(data?.groups?.length) ? (
+        <p className="text-sm text-muted-foreground">
+          {currentLocaleCode?.startsWith('pt')
+            ? 'Nenhum atributo configurado para esta categoria.'
+            : 'No attributes configured for this category.'}
+        </p>
+      ) : (
+        data.groups.map((group) => (
+          <div key={`${group.slug}-${group.id ?? 'general'}`} className="space-y-3">
+            <div>
+              <h4 className="text-sm font-medium">{group.name}</h4>
+            </div>
+
+            <div className="grid gap-4">
+              {group.attributes.map((attribute) => {
+                const attributeId = Number(attribute.id);
+                const draft = normalizeProductAttributeDraft(
+                  attribute as ProductAttributeMetadata,
+                  values[attributeId],
+                );
+                const dataType = String(attribute.data_type ?? 'text');
+                const relation = (attribute.category_attribute ?? {}) as CatalogRecord;
+                const attributeBadges = [
+                  relation.is_required
+                    ? currentLocaleCode?.startsWith('pt')
+                      ? 'Obrigatório'
+                      : 'Required'
+                    : null,
+                  relation.is_highlight
+                    ? currentLocaleCode?.startsWith('pt')
+                      ? 'Destaque'
+                      : 'Highlight'
+                    : null,
+                  relation.is_filter_visible
+                    ? currentLocaleCode?.startsWith('pt')
+                      ? 'Filtro'
+                      : 'Filter'
+                    : null,
+                  relation.is_comparison_visible
+                    ? currentLocaleCode?.startsWith('pt')
+                      ? 'Comparação'
+                      : 'Comparison'
+                    : null,
+                ].filter((item): item is string => Boolean(item));
+
+                return (
+                  <div key={attributeId} className="rounded-lg border bg-background p-3">
+                    <div className="mb-3 space-y-1">
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="space-y-1">
+                          <div className="font-medium">
+                            {String(attribute.name ?? attribute.label ?? attribute.slug)}
+                            {relation.is_required ? (
+                              <span className="ml-1 text-destructive">*</span>
+                            ) : null}
+                          </div>
+                          {attributeBadges.length ? (
+                            <div className="flex flex-wrap gap-2">
+                              {attributeBadges.map((badge) => (
+                                <Badge key={`${attributeId}-${badge}`} variant="secondary">
+                                  {badge}
+                                </Badge>
+                              ))}
+                            </div>
+                          ) : null}
+                        </div>
+                        {attribute.unit ? (
+                          <span className="text-xs text-muted-foreground">
+                            {String(attribute.unit)}
+                          </span>
+                        ) : null}
+                      </div>
+                      {attribute.description ? (
+                        <p className="text-xs text-muted-foreground">
+                          {String(attribute.description)}
+                        </p>
+                      ) : null}
+                      {errors[attributeId] ? (
+                        <p className="text-xs font-medium text-destructive">
+                          {errors[attributeId]}
+                        </p>
+                      ) : null}
+                    </div>
+
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      {dataType === 'option' ? (
+                        <div className="space-y-2 sm:col-span-2">
+                          <FormLabel>
+                            {currentLocaleCode?.startsWith('pt') ? 'Opção' : 'Option'}
+                          </FormLabel>
+                          <Select
+                            value={
+                              draft?.attribute_option_id
+                                ? String(draft.attribute_option_id)
+                                : ''
+                            }
+                            onValueChange={(next) =>
+                              updateDraft(attributeId, {
+                                data_type: dataType,
+                                attribute_option_id: next ? Number(next) : null,
+                              })
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue
+                                placeholder={
+                                  currentLocaleCode?.startsWith('pt')
+                                    ? 'Selecione uma opção'
+                                    : 'Select an option'
+                                }
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {(attribute.options ?? []).map((option) => (
+                                <SelectItem key={String(option.id)} value={String(option.id)}>
+                                  {String(option.label ?? option.option_value)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      ) : null}
+
+                      {dataType === 'text' || dataType === 'long_text' ? (
+                        <div className="space-y-2 sm:col-span-2">
+                          <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Valor' : 'Value'}</FormLabel>
+                          {dataType === 'long_text' ? (
+                            <Textarea
+                              value={draft?.value_text ?? ''}
+                              onChange={(event) =>
+                                updateDraft(attributeId, {
+                                  data_type: dataType,
+                                  value_text: event.target.value,
+                                })
+                              }
+                            />
+                          ) : (
+                            <Input
+                              value={draft?.value_text ?? ''}
+                              onChange={(event) =>
+                                updateDraft(attributeId, {
+                                  data_type: dataType,
+                                  value_text: event.target.value,
+                                })
+                              }
+                            />
+                          )}
+                        </div>
+                      ) : null}
+
+                      {dataType === 'number' ? (
+                        <>
+                          <div className="space-y-2">
+                            <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Número' : 'Number'}</FormLabel>
+                            <Input
+                              type="number"
+                              value={
+                                draft?.value_number === null ||
+                                draft?.value_number === undefined
+                                  ? ''
+                                  : String(draft.value_number)
+                              }
+                              onChange={(event) =>
+                                updateDraft(attributeId, {
+                                  data_type: dataType,
+                                  value_number:
+                                    event.target.value === ''
+                                      ? null
+                                      : Number(event.target.value),
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Unidade' : 'Unit'}</FormLabel>
+                            <Input
+                              value={draft?.value_unit ?? ''}
+                              onChange={(event) =>
+                                updateDraft(attributeId, {
+                                  data_type: dataType,
+                                  value_unit: event.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                        </>
+                      ) : null}
+
+                      {dataType === 'boolean' ? (
+                        <div className="space-y-2 sm:col-span-2">
+                          <FormLabel>{currentLocaleCode?.startsWith('pt') ? 'Valor' : 'Value'}</FormLabel>
+                          <Select
+                            value={
+                              draft?.value_boolean === null ||
+                              draft?.value_boolean === undefined
+                                ? ''
+                                : draft.value_boolean
+                                  ? 'true'
+                                  : 'false'
+                            }
+                            onValueChange={(next) =>
+                              updateDraft(attributeId, {
+                                data_type: dataType,
+                                value_boolean:
+                                  next === ''
+                                    ? null
+                                    : next === 'true',
+                              })
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue
+                                placeholder={
+                                  currentLocaleCode?.startsWith('pt')
+                                    ? 'Selecione um valor'
+                                    : 'Select a value'
+                                }
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="true">
+                                {currentLocaleCode?.startsWith('pt') ? 'Sim' : 'Yes'}
+                              </SelectItem>
+                              <SelectItem value="false">
+                                {currentLocaleCode?.startsWith('pt') ? 'Não' : 'No'}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      ) : null}
+
+                      <div className="flex items-center justify-between rounded-md border px-3 py-2 sm:col-span-2">
+                        <div>
+                          <div className="text-sm font-medium">
+                            {currentLocaleCode?.startsWith('pt')
+                              ? 'Valor verificado'
+                              : 'Verified value'}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {currentLocaleCode?.startsWith('pt')
+                              ? 'Marque quando o dado já tiver sido validado.'
+                              : 'Enable when the value has been validated.'}
+                          </div>
+                        </div>
+                        <Switch
+                          checked={Boolean(draft?.is_verified)}
+                          onCheckedChange={(checked) =>
+                            updateDraft(attributeId, {
+                              data_type: dataType,
+                              is_verified: checked,
+                            })
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))
+      )}
+    </section>
+  );
+}
+
+export function CatalogResourceFormSheet({
   open,
   onOpenChange,
   resource,
@@ -1322,28 +1322,28 @@ export function CatalogResourceFormSheet({
   recordId,
   onSuccess,
 }: FormSheetProps) {
-  const { request, currentLocaleCode } = useApp();
-  const t = useTranslations('catalog');
-  const isEditing = Boolean(recordId);
-  const [productAttributeValues, setProductAttributeValues] = useState<
-    Record<number, ProductAttributeDraft>
-  >({});
-  const [productAttributeSchema, setProductAttributeSchema] =
-    useState<CatalogAttributePayload | null>(null);
-  const [productAttributeErrors, setProductAttributeErrors] = useState<
-    Record<number, string>
-  >({});
-  const formSchema = useMemo(
-    () => buildFormSchema(resourceConfig),
-    [resourceConfig]
-  );
+  const { request, currentLocaleCode } = useApp();
+  const t = useTranslations('catalog');
+  const isEditing = Boolean(recordId);
+  const [productAttributeValues, setProductAttributeValues] = useState<
+    Record<number, ProductAttributeDraft>
+  >({});
+  const [productAttributeSchema, setProductAttributeSchema] =
+    useState<CatalogAttributePayload | null>(null);
+  const [productAttributeErrors, setProductAttributeErrors] = useState<
+    Record<number, string>
+  >({});
+  const formSchema = useMemo(
+    () => buildFormSchema(resourceConfig),
+    [resourceConfig]
+  );
 
   const form = useForm<CatalogFormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: buildDefaultValues(resourceConfig, resourceConfig.template),
   });
 
-  const { data: currentRecord, isLoading } = useQuery<CatalogRecord>({
+  const { data: currentRecord, isLoading } = useQuery<CatalogRecord>({
     queryKey: ['catalog-record-details', resource, recordId],
     queryFn: async () => {
       const response = await request({
@@ -1352,185 +1352,185 @@ export function CatalogResourceFormSheet({
       });
 
       return response.data as CatalogRecord;
-    },
-    enabled: open && Boolean(recordId),
-  });
-  const selectedCategoryId =
-    resource === 'products'
-      ? Number(form.watch('catalog_category_id') ?? 0) || null
-      : null;
-  const initialCategoryId =
-    resource === 'products'
-      ? Number(currentRecord?.catalog_category_id ?? 0) || null
-      : null;
-
-  useEffect(() => {
-    if (!open) {
-      setProductAttributeValues({});
-      setProductAttributeSchema(null);
-      setProductAttributeErrors({});
-      return;
-    }
-
-    const payload = currentRecord || resourceConfig.template;
-    form.reset(buildDefaultValues(resourceConfig, payload));
-  }, [currentRecord, form, open, resourceConfig]);
-
-  useEffect(() => {
-    setProductAttributeErrors({});
-  }, [selectedCategoryId]);
-
-  const submitLabel = isEditing
-    ? getCatalogLocalizedText(resourceConfig.editActionLabel, currentLocaleCode)
-    : getCatalogLocalizedText(
-        resourceConfig.createActionLabel,
-        currentLocaleCode
-      );
-
-  const handleSubmit = async (values: CatalogFormValues) => {
-    try {
-      const payload: CatalogRecord = {};
-
-      for (const section of resourceConfig.formSections) {
-        for (const field of section.fields) {
-          payload[field.key] = normalizeSubmitValue(field, values[field.key]);
-        }
-      }
-
-      let attributeSubmission:
-        | ReturnType<typeof buildProductAttributeSubmission>
-        | null = null;
-
-      if (resource === 'products') {
-        if (selectedCategoryId && !productAttributeSchema) {
-          toast.error(
-            currentLocaleCode?.startsWith('pt')
-              ? 'Aguarde o carregamento dos atributos da categoria antes de salvar.'
-              : 'Wait for the category attributes to load before saving.',
-          );
-          return;
-        }
-
-        attributeSubmission = buildProductAttributeSubmission(
-          productAttributeSchema,
-          productAttributeValues,
-          currentLocaleCode,
-        );
-
-        if (Object.keys(attributeSubmission.errors).length > 0) {
-          setProductAttributeErrors(attributeSubmission.errors);
-          toast.error(
-            Object.values(attributeSubmission.errors)[0] ?? t('toasts.saveError'),
-          );
-          return;
-        }
-      }
-
-      const response = await request({
-        url: isEditing
-          ? `/catalog/${resource}/${recordId}`
-          : `/catalog/${resource}`,
-        method: isEditing ? 'PATCH' : 'POST',
-        data: payload,
-      });
-
-      const savedRecord = (response.data || payload) as CatalogRecord;
-
-      if (resource === 'products') {
-        const savedId = extractRecordId(savedRecord);
-
-        if (savedId) {
-          await request({
-            url: `/catalog/products/${savedId}/attributes`,
-            method: 'PUT',
-            data: {
-              values: attributeSubmission?.values ?? [],
-            },
-          });
-
-          setProductAttributeErrors({});
-        }
-      }
-
-      toast.success(t('toasts.saveSuccess', { resource: resourceTitle }));
-      onOpenChange(false);
-      await onSuccess(savedRecord);
+    },
+    enabled: open && Boolean(recordId),
+  });
+  const selectedCategoryId =
+    resource === 'products'
+      ? Number(form.watch('catalog_category_id') ?? 0) || null
+      : null;
+  const initialCategoryId =
+    resource === 'products'
+      ? Number(currentRecord?.catalog_category_id ?? 0) || null
+      : null;
+
+  useEffect(() => {
+    if (!open) {
+      setProductAttributeValues({});
+      setProductAttributeSchema(null);
+      setProductAttributeErrors({});
+      return;
+    }
+
+    const payload = currentRecord || resourceConfig.template;
+    form.reset(buildDefaultValues(resourceConfig, payload));
+  }, [currentRecord, form, open, resourceConfig]);
+
+  useEffect(() => {
+    setProductAttributeErrors({});
+  }, [selectedCategoryId]);
+
+  const submitLabel = isEditing
+    ? getCatalogLocalizedText(resourceConfig.editActionLabel, currentLocaleCode)
+    : getCatalogLocalizedText(
+        resourceConfig.createActionLabel,
+        currentLocaleCode
+      );
+
+  const handleSubmit = async (values: CatalogFormValues) => {
+    try {
+      const payload: CatalogRecord = {};
+
+      for (const section of resourceConfig.formSections) {
+        for (const field of section.fields) {
+          payload[field.key] = normalizeSubmitValue(field, values[field.key]);
+        }
+      }
+
+      let attributeSubmission:
+        | ReturnType<typeof buildProductAttributeSubmission>
+        | null = null;
+
+      if (resource === 'products') {
+        if (selectedCategoryId && !productAttributeSchema) {
+          toast.error(
+            currentLocaleCode?.startsWith('pt')
+              ? 'Aguarde o carregamento dos atributos da categoria antes de salvar.'
+              : 'Wait for the category attributes to load before saving.',
+          );
+          return;
+        }
+
+        attributeSubmission = buildProductAttributeSubmission(
+          productAttributeSchema,
+          productAttributeValues,
+          currentLocaleCode,
+        );
+
+        if (Object.keys(attributeSubmission.errors).length > 0) {
+          setProductAttributeErrors(attributeSubmission.errors);
+          toast.error(
+            Object.values(attributeSubmission.errors)[0] ?? t('toasts.saveError'),
+          );
+          return;
+        }
+      }
+
+      const response = await request({
+        url: isEditing
+          ? `/catalog/${resource}/${recordId}`
+          : `/catalog/${resource}`,
+        method: isEditing ? 'PATCH' : 'POST',
+        data: payload,
+      });
+
+      const savedRecord = (response.data || payload) as CatalogRecord;
+
+      if (resource === 'products') {
+        const savedId = extractRecordId(savedRecord);
+
+        if (savedId) {
+          await request({
+            url: `/catalog/products/${savedId}/attributes`,
+            method: 'PUT',
+            data: {
+              values: attributeSubmission?.values ?? [],
+            },
+          });
+
+          setProductAttributeErrors({});
+        }
+      }
+
+      toast.success(t('toasts.saveSuccess', { resource: resourceTitle }));
+      onOpenChange(false);
+      await onSuccess(savedRecord);
     } catch (error) {
       toast.error(
         error instanceof Error ? error.message : t('toasts.saveError')
       );
     }
-  };
-
-  const handleApplyAiSuggestion = (suggestion: {
-    fields?: Record<string, unknown>;
-    product_attributes?: Array<Record<string, unknown>>;
-  }) => {
-    const fieldMap = new Map(
-      resourceConfig.formSections.flatMap((section) =>
-        section.fields.map((field) => [field.key, field] as const),
-      ),
-    );
-
-    for (const [key, value] of Object.entries(suggestion.fields ?? {})) {
-      const field = fieldMap.get(key);
-
-      if (!field) {
-        continue;
-      }
-
-      form.setValue(
-        key,
-        serializeInitialValue(field, value) as never,
-        { shouldDirty: true, shouldTouch: true },
-      );
-    }
-
-    if (resource === 'products' && suggestion.product_attributes?.length) {
-      const nextDrafts = { ...productAttributeValues };
-
-      for (const attribute of suggestion.product_attributes) {
-        const attributeId = Number(attribute.attribute_id ?? 0);
-
-        if (!attributeId) {
-          continue;
-        }
-
-        nextDrafts[attributeId] = {
-          attribute_id: attributeId,
-          data_type: String(attribute.data_type ?? nextDrafts[attributeId]?.data_type ?? 'text'),
-          attribute_option_id:
-            attribute.attribute_option_id === null ||
-            attribute.attribute_option_id === undefined
-              ? null
-              : Number(attribute.attribute_option_id),
-          value_text: String(attribute.value_text ?? ''),
-          value_number:
-            attribute.value_number === null || attribute.value_number === undefined
-              ? null
-              : Number(attribute.value_number),
-          value_boolean:
-            typeof attribute.value_boolean === 'boolean'
-              ? attribute.value_boolean
-              : null,
-          value_unit: String(attribute.value_unit ?? ''),
-          source_type: String(attribute.source_type ?? 'manual'),
-          confidence_score:
-            attribute.confidence_score === null ||
-            attribute.confidence_score === undefined
-              ? null
-              : Number(attribute.confidence_score),
-          is_verified: Boolean(attribute.is_verified ?? false),
-        };
-      }
-
-      setProductAttributeValues(nextDrafts);
-      setProductAttributeErrors({});
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+  };
+
+  const handleApplyAiSuggestion = (suggestion: {
+    fields?: Record<string, unknown>;
+    product_attributes?: Array<Record<string, unknown>>;
+  }) => {
+    const fieldMap = new Map(
+      resourceConfig.formSections.flatMap((section) =>
+        section.fields.map((field) => [field.key, field] as const),
+      ),
+    );
+
+    for (const [key, value] of Object.entries(suggestion.fields ?? {})) {
+      const field = fieldMap.get(key);
+
+      if (!field) {
+        continue;
+      }
+
+      form.setValue(
+        key,
+        serializeInitialValue(field, value) as never,
+        { shouldDirty: true, shouldTouch: true },
+      );
+    }
+
+    if (resource === 'products' && suggestion.product_attributes?.length) {
+      const nextDrafts = { ...productAttributeValues };
+
+      for (const attribute of suggestion.product_attributes) {
+        const attributeId = Number(attribute.attribute_id ?? 0);
+
+        if (!attributeId) {
+          continue;
+        }
+
+        nextDrafts[attributeId] = {
+          attribute_id: attributeId,
+          data_type: String(attribute.data_type ?? nextDrafts[attributeId]?.data_type ?? 'text'),
+          attribute_option_id:
+            attribute.attribute_option_id === null ||
+            attribute.attribute_option_id === undefined
+              ? null
+              : Number(attribute.attribute_option_id),
+          value_text: String(attribute.value_text ?? ''),
+          value_number:
+            attribute.value_number === null || attribute.value_number === undefined
+              ? null
+              : Number(attribute.value_number),
+          value_boolean:
+            typeof attribute.value_boolean === 'boolean'
+              ? attribute.value_boolean
+              : null,
+          value_unit: String(attribute.value_unit ?? ''),
+          source_type: String(attribute.source_type ?? 'manual'),
+          confidence_score:
+            attribute.confidence_score === null ||
+            attribute.confidence_score === undefined
+              ? null
+              : Number(attribute.confidence_score),
+          is_verified: Boolean(attribute.is_verified ?? false),
+        };
+      }
+
+      setProductAttributeValues(nextDrafts);
+      setProductAttributeErrors({});
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-2xl">
         <SheetHeader>
           <SheetTitle>{submitLabel}</SheetTitle>
@@ -1543,30 +1543,30 @@ export function CatalogResourceFormSheet({
             Carregando dados do registro...
           </div>
         ) : (
-          <Form {...form}>
-            <form
-              id={`catalog-form-${resource}`}
-              className="min-w-0 space-y-6 px-4 pb-4"
-              onSubmit={form.handleSubmit(handleSubmit)}
-            >
-              <div className="flex justify-end">
-                <CatalogAiFormAssistDialog
-                  resource={resource}
-                  resourceConfig={resourceConfig}
-                  disabled={form.formState.isSubmitting || isLoading}
-                  getCurrentValues={() =>
-                    buildCurrentFormPayload(resourceConfig, form.getValues())
-                  }
-                  getCurrentAttributeValues={() =>
-                    buildCurrentProductAttributeValues(productAttributeValues)
-                  }
-                  onApply={handleApplyAiSuggestion}
-                />
-              </div>
-
-              {resourceConfig.formSections.map((section) => (
-                <section
-                  key={section.title.en}
+          <Form {...form}>
+            <form
+              id={`catalog-form-${resource}`}
+              className="min-w-0 space-y-6 px-4 pb-4"
+              onSubmit={form.handleSubmit(handleSubmit)}
+            >
+              <div className="flex justify-end">
+                <CatalogAiFormAssistDialog
+                  resource={resource}
+                  resourceConfig={resourceConfig}
+                  disabled={form.formState.isSubmitting || isLoading}
+                  getCurrentValues={() =>
+                    buildCurrentFormPayload(resourceConfig, form.getValues())
+                  }
+                  getCurrentAttributeValues={() =>
+                    buildCurrentProductAttributeValues(productAttributeValues)
+                  }
+                  onApply={handleApplyAiSuggestion}
+                />
+              </div>
+
+              {resourceConfig.formSections.map((section) => (
+                <section
+                  key={section.title.en}
                   className="min-w-0 max-w-full space-y-4"
                 >
                   <div>
@@ -1746,24 +1746,24 @@ export function CatalogResourceFormSheet({
                       </div>
                     ))}
                   </div>
-                </section>
-              ))}
-
-              {resource === 'products' ? (
-                <ProductAttributesSection
-                  open={open}
-                  recordId={recordId}
-                  categoryId={selectedCategoryId}
-                  initialCategoryId={initialCategoryId}
-                  values={productAttributeValues}
-                  onChange={setProductAttributeValues}
-                  errors={productAttributeErrors}
-                  onSchemaChange={setProductAttributeSchema}
-                />
-              ) : null}
-            </form>
-          </Form>
-        )}
+                </section>
+              ))}
+
+              {resource === 'products' ? (
+                <ProductAttributesSection
+                  open={open}
+                  recordId={recordId}
+                  categoryId={selectedCategoryId}
+                  initialCategoryId={initialCategoryId}
+                  values={productAttributeValues}
+                  onChange={setProductAttributeValues}
+                  errors={productAttributeErrors}
+                  onSchemaChange={setProductAttributeSchema}
+                />
+              ) : null}
+            </form>
+          </Form>
+        )}
 
         <SheetFooter className="border-t">
           <div className="w-full">