'use client';

import { AdminFormShell } from '@/components/admin/form-shell';
import { TextField, TextAreaField, CheckboxField, SelectField, FieldsetLocale } from '@/components/admin/fields';
import { ImageUploadField } from '@/components/admin/image-upload';
import type { Locale } from '@/i18n/config';

interface ProductFormValues {
  id?: string;
  slug?: string;
  sku?: string;
  price?: number | null;
  currency?: string;
  available?: boolean;
  categoryId?: string;
  published?: boolean;
  images?: string[];
  fr?: { name: string; shortDescription: string; description: string };
  ar?: { name: string; shortDescription: string; description: string };
}

export function ProductForm({
  locale,
  categories,
  initial
}: {
  locale: Locale;
  categories: { id: string; name: string }[];
  initial?: ProductFormValues;
}) {
  const isEdit = Boolean(initial?.id);

  return (
    <AdminFormShell
      action={isEdit ? `/api/admin/products/${initial!.id}` : '/api/admin/products'}
      method={isEdit ? 'PATCH' : 'POST'}
      redirectTo={`/${locale}/admin/products`}
      submitLabel={isEdit ? 'Enregistrer' : 'Créer le produit'}
      buildPayload={(form) => {
        const price = form.get('price');
        const base = {
          price: price ? Number(price) : null,
          available: form.get('available') === 'on',
          published: form.get('published') === 'on',
          images: form.getAll('images'),
          translations: {
            fr: {
              name: form.get('name_fr'),
              shortDescription: form.get('shortDescription_fr'),
              description: form.get('description_fr')
            },
            ar: {
              name: form.get('name_ar'),
              shortDescription: form.get('shortDescription_ar'),
              description: form.get('description_ar')
            }
          }
        };
        if (isEdit) return base;
        return {
          ...base,
          slug: form.get('slug'),
          sku: form.get('sku'),
          currency: form.get('currency') || 'TND',
          categoryId: form.get('categoryId')
        };
      }}
    >
      {!isEdit && (
        <div className="grid gap-4 sm:grid-cols-2">
          <TextField name="slug" label="Slug (URL)" required />
          <TextField name="sku" label="SKU" required />
          <SelectField
            name="categoryId"
            label="Catégorie"
            required
            options={categories.map((c) => ({ value: c.id, label: c.name }))}
          />
          <TextField name="currency" label="Devise" defaultValue="TND" />
        </div>
      )}

      <div className="grid gap-4 sm:grid-cols-2">
        <TextField name="price" label="Prix (laisser vide = sur demande)" type="number" defaultValue={initial?.price ?? undefined} />
      </div>

      <div className="flex gap-6">
        <CheckboxField name="available" label="En stock" defaultChecked={initial?.available ?? true} />
        <CheckboxField name="published" label="Publié" defaultChecked={initial?.published ?? false} />
      </div>

      <ImageUploadField name="images" label="Images" multiple defaultValue={initial?.images} />

      <FieldsetLocale locale="fr">
        <TextField name="name_fr" label="Nom" required defaultValue={initial?.fr?.name} />
        <TextField
          name="shortDescription_fr"
          label="Description courte"
          required
          defaultValue={initial?.fr?.shortDescription}
        />
        <TextAreaField name="description_fr" label="Description" required defaultValue={initial?.fr?.description} />
      </FieldsetLocale>

      <FieldsetLocale locale="ar">
        <TextField name="name_ar" label="الاسم" required defaultValue={initial?.ar?.name} />
        <TextField
          name="shortDescription_ar"
          label="وصف مختصر"
          required
          defaultValue={initial?.ar?.shortDescription}
        />
        <TextAreaField name="description_ar" label="الوصف" required defaultValue={initial?.ar?.description} />
      </FieldsetLocale>
    </AdminFormShell>
  );
}