'use client';

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

interface ServiceFormValues {
  id?: string;
  slug?: string;
  order?: number;
  published?: boolean;
  heroImage?: string;
  fr?: { title: string; summary: string; description: string };
  ar?: { title: string; summary: string; description: string };
}

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

  return (
    <AdminFormShell
      action={isEdit ? `/api/admin/services/${initial!.id}` : '/api/admin/services'}
      method={isEdit ? 'PATCH' : 'POST'}
      redirectTo={`/${locale}/admin/services`}
      submitLabel={isEdit ? 'Enregistrer' : 'Créer le service'}
      buildPayload={(form) => {
        const base = {
          order: Number(form.get('order') ?? 0),
          published: form.get('published') === 'on',
          heroImage: form.get('heroImage') || null,
          translations: {
            fr: {
              title: form.get('title_fr'),
              summary: form.get('summary_fr'),
              description: form.get('description_fr')
            },
            ar: {
              title: form.get('title_ar'),
              summary: form.get('summary_ar'),
              description: form.get('description_ar')
            }
          }
        };
        return isEdit ? base : { ...base, slug: form.get('slug') };
      }}
    >
      {!isEdit && <TextField name="slug" label="Slug (URL)" required />}
      <ImageUploadField name="heroImage" label="Image du service" defaultValue={initial?.heroImage} />
      <div className="flex gap-6">
        <TextField name="order" label="Ordre" type="number" defaultValue={initial?.order ?? 0} />
        <CheckboxField name="published" label="Publié" defaultChecked={initial?.published ?? false} />
      </div>

      <FieldsetLocale locale="fr">
        <TextField name="title_fr" label="Titre" required defaultValue={initial?.fr?.title} />
        <TextField name="summary_fr" label="Résumé" required defaultValue={initial?.fr?.summary} />
        <TextAreaField name="description_fr" label="Description" required defaultValue={initial?.fr?.description} />
      </FieldsetLocale>
      <FieldsetLocale locale="ar">
        <TextField name="title_ar" label="العنوان" required defaultValue={initial?.ar?.title} />
        <TextField name="summary_ar" label="ملخص" required defaultValue={initial?.ar?.summary} />
        <TextAreaField name="description_ar" label="الوصف" required defaultValue={initial?.ar?.description} />
      </FieldsetLocale>
    </AdminFormShell>
  );
}