import { notFound } from "next/navigation";
import Link from "next/link";
import { eq } from "drizzle-orm";
import { db, schema } from "@/lib/db";
import { services as allServices } from "@/lib/services";
import {
  defaultTemplates,
  genericModificationTemplate,
} from "@/lib/forms/defaults";
import type { FormField, DocumentRequest } from "@/lib/forms/types";
import FormBuilderEditor from "./FormBuilderEditor";
import Icon from "@/components/Icon";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return { title: `Formulaire — ${slug}` };
}

export default async function FormulaireEditorPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const service = allServices.find((s) => s.slug === slug);
  if (!service) notFound();

  const existing = await db
    .select()
    .from(schema.formTemplate)
    .where(eq(schema.formTemplate.serviceSlug, slug))
    .limit(1);

  // Si pas de template en DB, on initialise depuis les défauts (sans persister
  // tout de suite — l'admin sauve manuellement).
  const template =
    existing[0] ??
    (() => {
      const tpl =
        defaultTemplates[slug] ?? genericModificationTemplate(service.title);
      return {
        serviceSlug: slug,
        title: tpl.title,
        description: tpl.description ?? null,
        fields: tpl.fields,
        documentRequests: tpl.documentRequests,
        published: true,
      };
    })();

  return (
    <div className="space-y-10 max-w-5xl">
      <Link
        href="/socialexadmin/dossiers/formulaires"
        className="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-on-surface-variant hover:text-primary transition-colors font-serif"
      >
        <Icon name="arrow_back" className="!text-base" />
        Retour aux formulaires
      </Link>

      <header>
        <span className="eyebrow">{service.category}</span>
        <h1 className="display-lg !text-4xl text-primary mt-2">
          {service.title}
        </h1>
        <p className="body-md text-on-surface-variant mt-2">
          Édition du formulaire public.{" "}
          <span className="font-mono text-xs">/{service.category}/{slug}/formulaire</span>
        </p>
      </header>

      <FormBuilderEditor
        serviceSlug={slug}
        initialTitle={template.title}
        initialDescription={template.description ?? ""}
        initialFields={template.fields as FormField[]}
        initialDocuments={template.documentRequests as DocumentRequest[]}
        initialPublished={template.published}
      />
    </div>
  );
}