import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
  seedOnderdelen,
  seedModellen,
  hoofdthemaLabels,
  documentSoortLabels,
  taalLabels,
  extraheerParameters,
  stelModelSamen,
} from "@/data/modeldocumenten";
import { StructuurLijst } from "@/components/modeldocumenten/StructuurLijst";

export const dynamicParams = false;

export function generateStaticParams() {
  return seedModellen.map((model) => ({ id: model.id }));
}

function vindModel(id: string) {
  return seedModellen.find((m) => m.id === id);
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const model = vindModel(id);
  if (!model) return {};
  return {
    title: `${model.titel} — Modeldocument — Notary.AI`,
    description: model.omschrijving,
  };
}

export default async function ModeldocumentPagina({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const model = vindModel(id);
  if (!model) notFound();

  const samengesteld = stelModelSamen(model, seedOnderdelen);
  const parameters = extraheerParameters(samengesteld);

  return (
    <div className="max-w-3xl mx-auto p-4 md:p-8 space-y-8">
      <Link href="/modeldocumenten" className="text-sm text-brand-600 hover:underline">
        ← Modeldocumenten
      </Link>

      <section>
        <h1 className="text-2xl font-bold text-slate-900 mb-2">{model.titel}</h1>
        <p className="text-xs text-slate-400 mb-2">
          Vul de <span className="font-mono">{"{{parameters}}"}</span> in op basis van het dossier,
          kies bij elk onderdeel met meerdere{" "}
          <span className="font-mono">HYPOTHESE —</span>-varianten de toepasselijke variant en schrap
          de overige, en verwerk elk{" "}
          <span className="font-mono">[NAKIJKEN OF SCHRAPPEN]</span>-onderdeel naargelang het dossier.
        </p>
        <pre className="text-xs text-slate-700 whitespace-pre-wrap font-mono leading-relaxed p-4 bg-slate-50 rounded-xl border border-slate-200 shadow-sm">
          {samengesteld}
        </pre>
      </section>

      <hr className="border-slate-200" />

      <section className="space-y-8">
        <div>
          <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
            Over dit modeldocument
          </h2>
          <p className="text-sm text-slate-500 mb-2">{model.omschrijving}</p>
          <dl className="text-xs text-slate-400 grid grid-cols-2 gap-x-4 gap-y-1 sm:flex sm:flex-wrap sm:gap-x-6">
            <div>
              <dt className="inline font-semibold">Id: </dt>
              <dd className="inline font-mono">{model.id}</dd>
            </div>
            <div>
              <dt className="inline font-semibold">Akttype: </dt>
              <dd className="inline">{model.akteType}</dd>
            </div>
            {model.thema && (
              <div>
                <dt className="inline font-semibold">Thema: </dt>
                <dd className="inline">{hoofdthemaLabels[model.thema]}</dd>
              </div>
            )}
            {model.soort && (
              <div>
                <dt className="inline font-semibold">Soort: </dt>
                <dd className="inline">{documentSoortLabels[model.soort]}</dd>
              </div>
            )}
            <div>
              <dt className="inline font-semibold">Versie: </dt>
              <dd className="inline">
                {model.versie} ({model.datum})
              </dd>
            </div>
            <div>
              <dt className="inline font-semibold">Taal: </dt>
              <dd className="inline">{taalLabels[model.taal ?? "nl"]}</dd>
            </div>
            {model.bron && (
              <div className="basis-full sm:basis-auto">
                <dt className="inline font-semibold">Bron: </dt>
                <dd className="inline">{model.bron}</dd>
              </div>
            )}
          </dl>
        </div>

        {parameters.length > 0 && (
          <div>
            <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
              In te vullen parameters ({parameters.length})
            </h2>
            <ul className="text-sm text-slate-700 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1 font-mono">
              {parameters.map((p) => (
                <li key={p}>{`{{${p}}}`}</li>
              ))}
            </ul>
          </div>
        )}

        <div>
          <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">
            Structuur ({model.structuur.length} onderdelen)
          </h2>
          <StructuurLijst structuur={model.structuur} onderdelen={seedOnderdelen} />
        </div>
      </section>
    </div>
  );
}