@hed-hog/catalog 0.0.293 → 0.0.295

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { RichTextEditor } from '@/components/rich-text-editor';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Command,
@@ -52,6 +53,7 @@ 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,
@@ -63,6 +65,40 @@ import {
 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;
@@ -225,6 +261,25 @@ 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;
+}
+
 function normalizeSubmitValue(
   field: CatalogFormFieldDefinition,
   rawValue: unknown
@@ -271,6 +326,225 @@ function normalizeSubmitValue(
   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);
 }
@@ -661,6 +935,383 @@ function CatalogUploadField({
   );
 }
 
+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,
@@ -674,6 +1325,14 @@ export function CatalogResourceFormSheet({
   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]
@@ -696,9 +1355,20 @@ export function CatalogResourceFormSheet({
     },
     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;
     }
 
@@ -706,6 +1376,10 @@ export function CatalogResourceFormSheet({
     form.reset(buildDefaultValues(resourceConfig, payload));
   }, [currentRecord, form, open, resourceConfig]);
 
+  useEffect(() => {
+    setProductAttributeErrors({});
+  }, [selectedCategoryId]);
+
   const submitLabel = isEditing
     ? getCatalogLocalizedText(resourceConfig.editActionLabel, currentLocaleCode)
     : getCatalogLocalizedText(
@@ -723,6 +1397,35 @@ export function CatalogResourceFormSheet({
         }
       }
 
+      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}`
@@ -732,6 +1435,23 @@ export function CatalogResourceFormSheet({
       });
 
       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);
@@ -742,6 +1462,73 @@ export function CatalogResourceFormSheet({
     }
   };
 
+  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">
@@ -762,6 +1549,21 @@ export function CatalogResourceFormSheet({
               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}
@@ -946,6 +1748,19 @@ export function CatalogResourceFormSheet({
                   </div>
                 </section>
               ))}
+
+              {resource === 'products' ? (
+                <ProductAttributesSection
+                  open={open}
+                  recordId={recordId}
+                  categoryId={selectedCategoryId}
+                  initialCategoryId={initialCategoryId}
+                  values={productAttributeValues}
+                  onChange={setProductAttributeValues}
+                  errors={productAttributeErrors}
+                  onSchemaChange={setProductAttributeSchema}
+                />
+              ) : null}
             </form>
           </Form>
         )}