'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 PostFormValues {
  id?: string;
  slug?: string;
  authorId?: string;
  tagIds?: string[];
  coverImage?: string;
  featured?: boolean;
  published?: boolean;
  readingMinutes?: number | null;
  fr?: { title: string; excerpt: string; content: string };
  ar?: { title: string; excerpt: string; content: string };
}

export function PostForm({
  locale,
  authors,
  tags,
  initial
}: {
  locale: Locale;
  authors: { id: string; name: string }[];
  tags: { id: string; name: string }[];
  initial?: PostFormValues;
}) {
  const isEdit = Boolean(initial?.id);

  return (
    <AdminFormShell
      action={isEdit ? `/api/admin/posts/${initial!.id}` : '/api/admin/posts'}
      method={isEdit ? 'PATCH' : 'POST'}
      redirectTo={`/${locale}/admin/blog`}
      submitLabel={isEdit ? 'Enregistrer' : "Créer l'article"}
      buildPayload={(form) => {
        const minutes = form.get('readingMinutes');
        const base = {
          authorId: form.get('authorId'),
          tagIds: form.getAll('tagIds'),
          coverImage: form.get('coverImage') || undefined,
          featured: form.get('featured') === 'on',
          published: form.get('published') === 'on',
          readingMinutes: minutes ? Number(minutes) : null,
          translations: {
            fr: {
              title: form.get('title_fr'),
              excerpt: form.get('excerpt_fr'),
              content: form.get('content_fr')
            },
            ar: {
              title: form.get('title_ar'),
              excerpt: form.get('excerpt_ar'),
              content: form.get('content_ar')
            }
          }
        };
        return isEdit ? base : { ...base, slug: form.get('slug') };
      }}
    >
      {!isEdit && <TextField name="slug" label="Slug (URL)" required />}

      <div className="grid gap-4 sm:grid-cols-2">
        <SelectField
          name="authorId"
          label="Auteur"
          required
          defaultValue={initial?.authorId}
          options={authors.map((a) => ({ value: a.id, label: a.name }))}
        />
        <TextField
          name="readingMinutes"
          label="Temps de lecture (min)"
          type="number"
          defaultValue={initial?.readingMinutes ?? undefined}
        />
      </div>

      {tags.length > 0 && (
        <div>
          <p className="mb-1 text-sm font-medium">Tags</p>
          <div className="flex flex-wrap gap-3">
            {tags.map((t) => (
              <label key={t.id} className="flex items-center gap-1.5 text-sm">
                <input
                  type="checkbox"
                  name="tagIds"
                  value={t.id}
                  defaultChecked={initial?.tagIds?.includes(t.id)}
                  className="h-4 w-4 rounded"
                />
                {t.name}
              </label>
            ))}
          </div>
        </div>
      )}

      <div className="flex gap-6">
        <CheckboxField name="featured" label="Mis en avant" defaultChecked={initial?.featured ?? false} />
        <CheckboxField name="published" label="Publié" defaultChecked={initial?.published ?? false} />
      </div>

      <ImageUploadField name="coverImage" label="Image de couverture" defaultValue={initial?.coverImage} />

      <FieldsetLocale locale="fr">
        <TextField name="title_fr" label="Titre" required defaultValue={initial?.fr?.title} />
        <TextField name="excerpt_fr" label="Extrait" required defaultValue={initial?.fr?.excerpt} />
        <TextAreaField name="content_fr" label="Contenu (markdown)" required rows={10} defaultValue={initial?.fr?.content} />
      </FieldsetLocale>
      <FieldsetLocale locale="ar">
        <TextField name="title_ar" label="العنوان" required defaultValue={initial?.ar?.title} />
        <TextField name="excerpt_ar" label="مقتطف" required defaultValue={initial?.ar?.excerpt} />
        <TextAreaField name="content_ar" label="المحتوى" required rows={10} defaultValue={initial?.ar?.content} />
      </FieldsetLocale>
    </AdminFormShell>
  );
}