import type { Metadata } from 'next';
import Link from 'next/link';
import { erfordereBenutzer } from '@/lib/auth/rechte';
import { inhalte } from '@/lib/inhalte';
import { glossarAnker } from '@/lib/inhalte/glossarverweise';
import { normalisiere } from '@/lib/inhalte/laden';
import { GlossarSuche } from './GlossarSuche';
import { Druckknopf } from '@/komponenten/Druckknopf';

export const metadata: Metadata = { title: 'Glossar' };
export const dynamic = 'force-dynamic';

export default async function GlossarSeite({ searchParams }: { searchParams: Promise<{ suche?: string }> }) {
  await erfordereBenutzer();
  const parameter = await searchParams;
  const alle = inhalte();

  const suchbegriff = (parameter.suche ?? '').trim();
  const gesucht = normalisiere(suchbegriff);

  const eintraege = [...alle.glossar].sort((a, b) => a.begriff.localeCompare(b.begriff, 'de-DE'));
  const gefiltert = gesucht
    ? eintraege.filter(
        (e) =>
          normalisiere(e.begriff).includes(gesucht) ||
          normalisiere(e.steht_fuer ?? '').includes(gesucht) ||
          normalisiere(e.erklaerung).includes(gesucht) ||
          e.formen.some((f) => normalisiere(f).includes(gesucht)),
      )
    : eintraege;

  return (
    <div className="stapel">
      <div>
        <h1>Glossar</h1>
        <p className="leise">
          {alle.glossar.length} Begriffe. In den Handouts sind sie verlinkt – ein Klick führt hierher.
        </p>
      </div>

      <GlossarSuche anfangswert={suchbegriff} />

      {gefiltert.length === 0 ? (
        <p className="karte">Kein Begriff passt zu &bdquo;{suchbegriff}&ldquo;.</p>
      ) : (
        <dl className="glossar">
          {gefiltert.map((eintrag) => (
            <div key={eintrag.begriff} id={glossarAnker(eintrag.begriff)} className="glossar-eintrag karte">
              <dt>
                {eintrag.begriff}
                {eintrag.steht_fuer ? <span className="glossar-langform">{eintrag.steht_fuer}</span> : null}
              </dt>
              <dd>
                <p style={{ marginBottom: eintrag.siehe_auch.length > 0 ? '0.5rem' : 0 }}>{eintrag.erklaerung}</p>
                {eintrag.siehe_auch.length > 0 ? (
                  <p className="leise" style={{ margin: 0 }}>
                    Siehe auch:{' '}
                    {eintrag.siehe_auch.map((verweis, index) => (
                      <span key={verweis}>
                        {index > 0 ? ', ' : ''}
                        <Link href={`#${glossarAnker(verweis)}`}>{verweis}</Link>
                      </span>
                    ))}
                  </p>
                ) : null}
              </dd>
            </div>
          ))}
        </dl>
      )}

      <div className="reihe nicht-drucken">
        <Druckknopf beschriftung="Glossar drucken" />
      </div>
    </div>
  );
}