AfiS-Aktensystem/web/app/(app)/suche/page.tsx

import type { Metadata } from 'next'
import Link from 'next/link'
import { db } from '@/lib/db'
import { requireUser } from '@/lib/auth/current'
import { parseFilters, toSearchParams, SEARCH_KINDS } from '@/lib/search/query'
import {
  searchCases,
  searchCounts,
  searchDocuments,
  searchPersonnel,
} from '@/lib/search/service'
import { builtinViews } from '@/lib/search/views'
import { de } from '@/lib/i18n/de'
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
import { StatusTags } from '@/components/StatusTags'
import { SearchBox } from './SearchBox'
import { SavedViews } from './SavedViews'

export const metadata: Metadata = { title: de.search.heading }
export const dynamic = 'force-dynamic'

/**
 * Suchseite.
 *
 * Alles läuft über Adressparameter: das macht jeden Zustand teilbar, den
 * Zurück-Knopf richtig und eine gespeicherte Ansicht zu dem, was sie ist —
 * ein Lesezeichen. Siehe lib/search/query.ts.
 */
export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const user = await requireUser()
  const roh = await searchParams
  const filters = parseFilters(
    Object.fromEntries(
      Object.entries(roh).map(([k, v]) => [k, Array.isArray(v) ? v[0] : v]),
    ),
  )

  const [levels, gespeichert] = await Promise.all([
    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
    db.savedView.findMany({
      where: { userId: user.id },
      orderBy: [{ sortOrder: 'asc' }, { createdAt: 'asc' }],
      select: { id: true, name: true, query: true },
    }),
  ])
  const levelName = new Map(levels.map((l) => [l.level, l.name]))

  const [ergebnis, zahlen] = await Promise.all([
    filters.kind === 'document'
      ? searchDocuments(user.permissions, filters)
      : filters.kind === 'personnel'
        ? searchPersonnel(user.permissions, filters)
        : searchCases(user.permissions, filters),
    // Die Zahlen der anderen Arten. Ohne sie sucht man nach einem Namen, landet
    // auf den Fallakten und erfährt nie, dass es dazu auch eine Personalakte
    // gibt — der Reiter sieht leer aus wie jeder andere.
    searchCounts(user.permissions, filters),
  ])

  const statusTags = filters.kind === 'personnel' ? await listStatusTags() : []

  return (
    <main className="mx-auto max-w-5xl px-6 py-10">
      <div className="flex flex-wrap items-baseline justify-between gap-4">
        <h1 className="font-condensed">{de.search.heading}</h1>
        <span className="font-mono text-xs text-text-dim">
          {de.search.countLabel(ergebnis.total)}
        </span>
      </div>

      <SearchBox filters={filters} />

      <nav className="mt-4 flex flex-wrap gap-2">
        {SEARCH_KINDS.map((kind) => {
          const anzahl = zahlen[kind]
          // `null` heisst: diese Art gibt es für diesen Nutzer nicht. Dann
          // fehlt der Reiter, statt eine Null zu zeigen — auch eine Null wäre
          // eine Auskunft.
          if (anzahl === null) return null

          return (
            <Link
              key={kind}
              href={`/suche?${toSearchParams({ ...filters, kind, cursor: undefined })}`}
              aria-current={kind === filters.kind ? 'page' : undefined}
              className="btn btn-sm"
            >
              {de.search.kinds[kind]}
              <span className="font-mono text-text-dim">{anzahl}</span>
            </Link>
          )
        })}
      </nav>

      <SavedViews
        builtins={builtinViews()}
        saved={gespeichert}
        currentQuery={toSearchParams({ ...filters, cursor: undefined })}
      />

      {'facets' in ergebnis ? (
        <div className="mt-6 flex flex-wrap gap-x-8 gap-y-3 border-t border-line pt-4 text-2xs">
          <Facette
            label={de.case.status}
            werte={ergebnis.facets.status.map((f) => ({
              ...f,
              label: de.case.statusNames[f.value] ?? f.value,
            }))}
            param="status"
            filters={filters}
          />
          <Facette
            label={de.case.type}
            werte={ergebnis.facets.templateKey.map((f) => ({ ...f, label: f.value }))}
            param="templateKey"
            filters={filters}
          />
          <Facette
            label={de.clearance.classification}
            werte={ergebnis.facets.classification.map((f) => ({
              ...f,
              label: `${f.value} · ${levelName.get(Number(f.value)) ?? ''}`,
            }))}
            param="classification"
            filters={filters}
          />
        </div>
      ) : null}

      {ergebnis.truncated ? (
        <p className="mt-4 text-2xs text-stamp-3">{de.search.truncated}</p>
      ) : null}

      {ergebnis.hits.length === 0 ? (
        <div className="mt-10">
          <p className="text-text-dim">
            {filters.q ? de.search.empty : de.search.emptyNoQuery}
          </p>
          {/* Wo sonst noch etwas liegt. Der leere Reiter allein liesse den
              Eindruck, es gebe zu diesem Begriff nichts. */}
          <div className="mt-3 flex flex-wrap gap-2">
            {SEARCH_KINDS.filter(
              (kind) => kind !== filters.kind && (zahlen[kind] ?? 0) > 0,
            ).map((kind) => (
              <Link
                key={kind}
                href={`/suche?${toSearchParams({ ...filters, kind, cursor: undefined })}`}
                className="btn btn-sm btn-primary"
              >
                {de.search.elsewhere(de.search.kinds[kind]!, zahlen[kind]!)}
              </Link>
            ))}
          </div>
        </div>
      ) : (
        <ul className="mt-6 border-t border-line">
          {ergebnis.hits.map((treffer) => (
            <li key={treffer.id} className="border-b border-line">
              {'caseNumber' in treffer ? (
                <Link
                  href={`/faelle/${treffer.caseNumber}`}
                  prefetch
                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
                  style={classificationEdgeStyle(treffer.classification)}
                >
                  <span className="font-mono text-xs text-text-dim">{treffer.caseNumber}</span>
                  <span className="grow">{treffer.title}</span>
                  <span className="font-condensed text-2xs text-text-dim">
                    {de.case.statusNames[treffer.status] ?? treffer.status}
                  </span>
                  <StampMark
                    level={treffer.classification}
                    name={levelName.get(treffer.classification) ?? de.common.unknown}
                  />
                </Link>
              ) : 'documentNumber' in treffer ? (
                <Link
                  href={`/dokumente/${treffer.documentNumber}`}
                  prefetch
                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
                  style={classificationEdgeStyle(treffer.classification)}
                >
                  <span className="font-mono text-xs text-text-dim">
                    {treffer.documentNumber}
                  </span>
                  <span className="grow">{treffer.title}</span>
                  <span className="font-condensed text-2xs text-text-dim">
                    {de.document.statusNames[treffer.status] ?? treffer.status}
                  </span>
                </Link>
              ) : (
                <Link
                  href={`/personalakten/${treffer.id}`}
                  prefetch
                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
                  style={classificationEdgeStyle(treffer.classification)}
                >
                  <span className="grow">{treffer.displayName}</span>
                  {treffer.rank ? (
                    <span className="font-condensed text-2xs text-text-dim">{treffer.rank}</span>
                  ) : null}
                  <StatusTags tags={treffer.statusTags} known={statusTags} />
                </Link>
              )}
            </li>
          ))}
        </ul>
      )}

      {'cursor' in ergebnis && ergebnis.cursor ? (
        <p className="mt-6">
          <Link
            href={`/suche?${toSearchParams({ ...filters, cursor: ergebnis.cursor })}`}
            className="font-condensed text-xs"
          >
            {de.search.more}
          </Link>
        </p>
      ) : null}
    </main>
  )
}

async function listStatusTags() {
  return db.personnelStatusTag.findMany({
    where: { isActive: true },
    orderBy: { sortOrder: 'asc' },
    select: { key: true, name: true, colorToken: true },
  })
}

/**
 * Eine Facette. Die Zahlen stammen aus derselben Abfrage wie die Liste — ein
 * Zähler, der mehr zählt als die Liste zeigt, wäre selbst eine Information.
 */
function Facette({
  label,
  werte,
  param,
  filters,
}: {
  label: string
  werte: { value: string; label: string; count: number }[]
  param: 'status' | 'templateKey' | 'classification'
  filters: ReturnType<typeof parseFilters>
}) {
  if (werte.length === 0) return null

  return (
    <div>
      <p className="font-condensed text-text-dim">{label}</p>
      <ul className="mt-1 space-y-0.5">
        {werte.slice(0, 6).map((wert) => {
          const aktiv = String(filters[param] ?? '') === wert.value
          return (
            <li key={wert.value}>
              <Link
                href={`/suche?${toSearchParams({
                  ...filters,
                  [param]: aktiv ? undefined : wert.value,
                  cursor: undefined,
                })}`}
                className={aktiv ? 'text-accent' : 'text-text'}
              >
                {wert.label} <span className="font-mono text-text-dim">{wert.count}</span>
              </Link>
            </li>
          )
        })}
      </ul>
    </div>
  )
}