'use client';

import { AdminFormShell } from '@/components/admin/form-shell';
import { TextField, FieldsetLocale } from '@/components/admin/fields';
import type { Locale } from '@/i18n/config';

interface CategoryFormValues {
  id?: string;
  slug?: string;
  order?: number;
  fr?: { name: string; description?: string };
  ar?: { name: string; description?: string };
}

export function CategoryForm({ locale, initial }: { locale: Locale; initial?: CategoryFormValues }) {
  const isEdit = Boolean(initial?.id);

  return (
    <AdminFormShell
      action={isEdit ? `/api/admin/categories/${initial!.id}` : '/api/admin/categories'}
      method={isEdit ? 'PATCH' : 'POST'}
      redirectTo={`/${locale}/admin/categories`}
      submitLabel={isEdit ? 'Enregistrer' : 'Créer la catégorie'}
      buildPayload={(form) => {
        const base = {
          order: Number(form.get('order') ?? 0),
          translations: {
            fr: { name: form.get('name_fr'), description: form.get('description_fr') || undefined },
            ar: { name: form.get('name_ar'), description: form.get('description_ar') || undefined }
          }
        };
        return isEdit ? base : { ...base, slug: form.get('slug') };
      }}
    >
      {!isEdit && <TextField name="slug" label="Slug (URL)" required />}
      <TextField name="order" label="Ordre d'affichage" type="number" defaultValue={initial?.order ?? 0} />

      <FieldsetLocale locale="fr">
        <TextField name="name_fr" label="Nom" required defaultValue={initial?.fr?.name} />
      </FieldsetLocale>
      <FieldsetLocale locale="ar">
        <TextField name="name_ar" label="الاسم" required defaultValue={initial?.ar?.name} />
      </FieldsetLocale>
    </AdminFormShell>
  );
}