'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 ProjectFormValues {
  id?: string;
  slug?: string;
  location?: string;
  installationType?: string;
  systemSizeKwc?: number | null;
  images?: string[];
  published?: boolean;
  fr?: { title: string; summary: string; description?: string };
  ar?: { title: string; summary: string; description?: string };
}

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

  return (
    <AdminFormShell
      action={isEdit ? `/api/admin/projects/${initial!.id}` : '/api/admin/projects'}
      method={isEdit ? 'PATCH' : 'POST'}
      redirectTo={`/${locale}/admin/projects`}
      submitLabel={isEdit ? 'Enregistrer' : 'Créer la réalisation'}
      buildPayload={(form) => {
        const size = form.get('systemSizeKwc');
        const base = {
          location: form.get('location') || undefined,
          installationType: form.get('installationType') || undefined,
          systemSizeKwc: size ? Number(size) : null,
          published: form.get('published') === 'on',
          images: form.getAll('images'),
          translations: {
            fr: {
              title: form.get('title_fr'),
              summary: form.get('summary_fr'),
              description: form.get('description_fr') || undefined
            },
            ar: {
              title: form.get('title_ar'),
              summary: form.get('summary_ar'),
              description: form.get('description_ar') || undefined
            }
          }
        };
        return isEdit ? base : { ...base, slug: form.get('slug') };
      }}
    >
      {!isEdit && <TextField name="slug" label="Slug (URL)" required />}

      <div className="grid gap-4 sm:grid-cols-3">
        <TextField name="location" label="Localisation" defaultValue={initial?.location} />
        <TextField
          name="installationType"
          label="Type (résidentiel/commercial/industriel)"
          defaultValue={initial?.installationType}
        />
        <TextField
          name="systemSizeKwc"
          label="Puissance (kWc)"
          type="number"
          defaultValue={initial?.systemSizeKwc ?? undefined}
        />
      </div>
      <CheckboxField name="published" label="Publié" defaultChecked={initial?.published ?? false} />

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

      <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" 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="الوصف" defaultValue={initial?.ar?.description} />
      </FieldsetLocale>
    </AdminFormShell>
  );
}