'use client';

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

interface FaqFormValues {
  id?: string;
  serviceId?: string | null;
  order?: number;
  fr?: { question: string; answer: string };
  ar?: { question: string; answer: string };
}

export function FaqForm({
  locale,
  services,
  initial
}: {
  locale: Locale;
  services: { id: string; title: string }[];
  initial?: FaqFormValues;
}) {
  const isEdit = Boolean(initial?.id);

  return (
    <AdminFormShell
      action={isEdit ? `/api/admin/faqs/${initial!.id}` : '/api/admin/faqs'}
      method={isEdit ? 'PATCH' : 'POST'}
      redirectTo={`/${locale}/admin/faqs`}
      submitLabel={isEdit ? 'Enregistrer' : 'Ajouter la question'}
      buildPayload={(form) => ({
        serviceId: form.get('serviceId') === 'none' ? null : form.get('serviceId'),
        order: Number(form.get('order') ?? 0),
        translations: {
          fr: { question: form.get('question_fr'), answer: form.get('answer_fr') },
          ar: { question: form.get('question_ar'), answer: form.get('answer_ar') }
        }
      })}
    >
      <div className="grid gap-4 sm:grid-cols-2">
        <SelectField
          name="serviceId"
          label="Service lié (optionnel = FAQ générale)"
          defaultValue={initial?.serviceId ?? 'none'}
          options={[{ value: 'none', label: 'Aucun — FAQ générale' }, ...services.map((s) => ({ value: s.id, label: s.title }))]}
        />
        <TextField name="order" label="Ordre" type="number" defaultValue={initial?.order ?? 0} />
      </div>

      <FieldsetLocale locale="fr">
        <TextField name="question_fr" label="Question" required defaultValue={initial?.fr?.question} />
        <TextAreaField name="answer_fr" label="Réponse" required defaultValue={initial?.fr?.answer} />
      </FieldsetLocale>
      <FieldsetLocale locale="ar">
        <TextField name="question_ar" label="السؤال" required defaultValue={initial?.ar?.question} />
        <TextAreaField name="answer_ar" label="الجواب" required defaultValue={initial?.ar?.answer} />
      </FieldsetLocale>
    </AdminFormShell>
  );
}