AfiS-Aktensystem/web/app/(app)/faelle/[caseNumber]/page.tsx

import type { Metadata } from 'next'
import { Suspense } from 'react'
import { notFound } from 'next/navigation'
import { db } from '@/lib/db'
import { requireUser } from '@/lib/auth/current'
import { visibleEntryWhere } from '@/lib/access/caseFilter'
import { loadVisibleCase } from '@/lib/cases/service'
import { recordRead, READ_AUDIT_FROM_LEVEL } from '@/lib/audit'
import { de } from '@/lib/i18n/de'
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
import { SkeletonLine } from '@/components/Skeleton'
import { EntryComposer } from './EntryComposer'
import { Sections } from '@/components/sections/Sections'
import { saveSectionAction } from './sectionActions'
import { loadSections } from '@/lib/cases/sectionService'
import { canEditCase } from '@/lib/access/caseWrite'
import { CaseActions } from './CaseActions'
import { EntryActions } from './EntryActions'
import { Participants } from './Participants'
import { CaseLinks } from './CaseLinks'
import { listParticipants } from '@/lib/cases/participants'
import { listLinks } from '@/lib/cases/links'
import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
import { visiblePersonnelWhere } from '@/lib/access/personnelFilter'
import { DocumentList } from '@/components/documents/DocumentList'
import { NewDocument } from '@/components/documents/NewDocument'
import { Attachments } from '@/components/files/Attachments'
import { ChatLazy } from '@/components/chat/ChatLazy'
import { loadChatView } from '@/lib/chat/load'
import { listAttachments } from '@/lib/files/service'
import { toAttachmentViews } from '@/lib/files/view'
import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
import { evaluateEntryEdit, canRetract } from '@/lib/cases/entryPolicy'
import Link from 'next/link'
import type { EffectivePermissions } from '@/lib/auth/permissions'

export const dynamic = 'force-dynamic'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ caseNumber: string }>
}): Promise<Metadata> {
  const { caseNumber } = await params
  return { title: caseNumber }
}

/**
 * Der Verlauf hängt in einer eigenen Suspense-Grenze und streamt nach. Die
 * Kopfdaten stehen sofort, der Nutzer liest schon, während der Rest lädt.
 * Siehe docs/09-performance-und-ux.md.
 */
async function Timeline({
  caseId,
  caseNumber,
  permissions,
}: {
  caseId: string
  caseNumber: string
  permissions: EffectivePermissions
}) {
  const settings = await db.appSetting.findUnique({ where: { id: 1 } })
  const policy = {
    entryEditPolicy: (settings?.entryEditPolicy ?? 'GRACE_WINDOW') as
      | 'APPEND_ONLY'
      | 'GRACE_WINDOW'
      | 'OPEN',
    entryEditGraceMinutes: settings?.entryEditGraceMinutes ?? 15,
    entryEditMarkGrace: settings?.entryEditMarkGrace ?? false,
  }

  const entries = await db.caseEntry.findMany({
    where: { AND: [visibleEntryWhere(permissions), { caseId }] },
    orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
    take: 100,
    select: {
      id: true,
      type: true,
      body: true,
      minClearance: true,
      authorId: true,
      createdAt: true,
      version: true,
      editedAt: true,
      editVisible: true,
      retractedAt: true,
      retractionReason: true,
    },
  })

  if (entries.length === 0) {
    return <p className="text-text-dim">{de.entry.empty}</p>
  }

  const authors = await db.user.findMany({
    where: { id: { in: [...new Set(entries.map((e) => e.authorId))] } },
    select: { id: true, displayName: true },
  })
  const nameOf = new Map(authors.map((a) => [a.id, a.displayName]))

  return (
    <ol className="timeline">
      {entries.map((entry) => (
        <li key={entry.id} className="pb-6">
          <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-2xs text-text-dim">
            <span className="font-condensed">{de.entry.types[entry.type]}</span>
            <span className="font-mono">{nameOf.get(entry.authorId) ?? entry.authorId}</span>
            <time dateTime={entry.createdAt.toISOString()}>
              {entry.createdAt.toLocaleString('de-DE')}
            </time>
            {entry.editVisible && entry.editedAt ? (
              <Link
                href={`/faelle/${caseNumber}/aenderungen`}
                className="font-condensed"
              >
                {de.entry.edited(entry.version)}
              </Link>
            ) : null}
          </div>

          {entry.retractedAt ? (
            <p className="mt-1 border-l-(length:--spacing-edge) border-line pl-3 text-sm text-text-dim">
              {de.entry.retracted(
                entry.retractedAt.toLocaleDateString('de-DE'),
                nameOf.get(entry.authorId) ?? entry.authorId,
                entry.retractionReason ?? '',
              )}
            </p>
          ) : (
            <p className="mt-1 max-w-(--container-measure) whitespace-pre-wrap text-sm">
              {entry.body}
            </p>
          )}

          <EntryActions
            entryId={entry.id}
            caseNumber={caseNumber}
            body={entry.body}
            retracted={entry.retractedAt !== null}
            canEdit={evaluateEntryEdit(permissions, entry, policy).ok}
            canRetract={canRetract(permissions, entry)}
          />
        </li>
      ))}
    </ol>
  )
}

/**
 * Beteiligte, Verknüpfungen und Dokumente hängen in einer gemeinsamen
 * Suspense-Grenze: drei kleine Abfragen, die zusammen einen Block ergeben.
 * Getrennt zu streamen liesse den Kasten dreimal springen.
 */
async function Relations({
  akte,
  permissions,
  canEdit,
}: {
  akte: { id: string; caseNumber: string; classification: number }
  permissions: EffectivePermissions
  canEdit: boolean
}) {
  const [participants, links, documents, anhaenge, templates, levels, members, files] =
    await Promise.all([
    listParticipants(permissions, akte.id),
    listLinks(permissions, akte.id),
    listDocuments(permissions, { caseId: akte.id }),
    listAttachments(permissions, { caseId: akte.id }),
    canEdit ? listTemplatesFor('CASE_DOCUMENT') : Promise.resolve([]),
    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
    canEdit
      ? db.user.findMany({
          orderBy: { displayName: 'asc' },
          take: 200,
          select: { id: true, displayName: true },
        })
      : Promise.resolve([]),
    // Nur Personalakten, die der Eintragende sehen darf, und nur, wenn er sie
    // überhaupt lesen darf: sonst verriete die Auswahlliste ihre Existenz.
    canEdit && (permissions.isAdmin || permissions.permissions.has('personnel.read'))
      ? db.personnelFile.findMany({
          where: visiblePersonnelWhere(permissions),
          orderBy: { displayName: 'asc' },
          take: 200,
          select: { id: true, displayName: true },
        })
      : Promise.resolve([]),
  ])

  const levelName = new Map(levels.map((l) => [l.level, l.name]))

  return (
    <div className="grid gap-10 md:grid-cols-2">
      <section>
        <h2 className="font-condensed">{de.participant.heading}</h2>
        <div className="mt-4">
          <Participants
            caseNumber={akte.caseNumber}
            participants={participants}
            canEdit={canEdit}
            members={members}
            files={files}
          />
        </div>
      </section>

      <section>
        <h2 className="font-condensed">{de.link.heading}</h2>
        <div className="mt-4">
          <CaseLinks caseNumber={akte.caseNumber} links={links} canEdit={canEdit} />
        </div>
      </section>

      <section className="md:col-span-2">
        <h2 className="font-condensed">{de.attachment.heading}</h2>
        <div className="mt-4">
          <Attachments
            target={{ caseNumber: akte.caseNumber }}
            topic={`case:${akte.id}`}
            initial={toAttachmentViews(anhaenge)}
            canUpload={canEdit}
            canRelease={permissions.isAdmin}
          />
        </div>
      </section>

      <section className="md:col-span-2">
        <h2 className="font-condensed">{de.document.heading}</h2>
        <div className="mt-4 space-y-4">
          <DocumentList documents={documents} levelName={levelName} />
          {canEdit ? (
            <NewDocument
              templates={templates}
              levels={levels.filter((l) => l.level <= permissions.clearanceLevel)}
              defaultLevel={Math.min(akte.classification, permissions.clearanceLevel)}
              caseNumber={akte.caseNumber}
            />
          ) : null}
        </div>
      </section>
    </div>
  )
}

/**
 * Der Aktenchat. Eigene Suspense-Grenze, weil er die meisten Abfragen macht
 * und der Rest der Seite nicht auf ihn warten soll.
 */
async function ChatBlock({
  akte,
  user,
}: {
  akte: { id: string; caseNumber: string; status: string; classification: number }
  user: { id: string; permissions: EffectivePermissions }
}) {
  const ansicht = await loadChatView(user.permissions, {
    kind: 'case',
    caseNumber: akte.caseNumber,
  })

  return (
    <ChatLazy
      scope={{ kind: 'case', caseNumber: akte.caseNumber, caseId: akte.id }}
      topic={`case:${akte.id}`}
      initial={ansicht.messages}
      initialReactions={ansicht.reactions}
      currentUserId={user.id}
      lastReadAt={ansicht.lastReadAt}
      canAdopt={canEditCase(user.permissions, akte, 'entry.create').ok}
      mentionNames={ansicht.mentionNames}
    />
  )
}

async function SectionBlock({
  caseId,
  caseNumber,
  templateId,
  permissions,
  canEdit,
}: {
  caseId: string
  caseNumber: string
  templateId: string
  permissions: EffectivePermissions
  canEdit: boolean
}) {
  const sections = await loadSections(permissions, caseId, templateId)
  return (
    <Sections
      scope={`fall:${caseNumber}`}
      save={saveSectionAction.bind(null, caseNumber)}
      sections={sections}
      canEdit={canEdit}
    />
  )
}

export default async function CasePage({
  params,
}: {
  params: Promise<{ caseNumber: string }>
}) {
  const user = await requireUser()
  const { caseNumber } = await params

  const akte = await loadVisibleCase(user.permissions, caseNumber)
  // Kein Zugriff heisst 404, nicht 403: die Existenz ist selbst eine Information.
  if (!akte) notFound()

  // Harte Regel 3: jeder Lesezugriff ab Stufe 3 wird protokolliert.
  if (akte.classification >= READ_AUDIT_FROM_LEVEL) {
    recordRead({
      actorId: user.id,
      action: 'case.read',
      targetType: 'Case',
      targetId: akte.id,
      clearanceAtTime: user.permissions.clearanceLevel,
      meta: { caseNumber: akte.caseNumber, classification: akte.classification },
    })
  }

  const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
  const level = levels.find((l) => l.level === akte.classification)

  return (
    <main className="mx-auto max-w-5xl px-6 py-10">
      <header
        className="pl-3"
        style={classificationEdgeStyle(akte.classification)}
      >
        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
          <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
          <StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
        </div>
        <h1 className="mt-2 font-condensed">{akte.title}</h1>
        <dl className="mt-3 flex flex-wrap gap-x-8 gap-y-1 text-xs text-text-dim">
          <div className="flex gap-2">
            <dt className="font-condensed">{de.case.status}</dt>
            <dd>{de.case.statusNames[akte.status]}</dd>
          </div>
          <div className="flex gap-2">
            <dt className="font-condensed">{de.case.type}</dt>
            <dd>{akte.templateKey}</dd>
          </div>
          {akte.dueAt ? (
            <div className="flex gap-2">
              <dt className="font-condensed">{de.case.dueAt}</dt>
              <dd>{akte.dueAt.toLocaleDateString('de-DE')}</dd>
            </div>
          ) : null}
        </dl>
        <CaseActions
          caseNumber={akte.caseNumber}
          classification={akte.classification}
          statusTargets={allowedTargets(akte.status as CaseStatusName)}
          levels={levels.map((l) => ({ level: l.level, name: l.name }))}
          maxLevel={user.permissions.clearanceLevel}
        />
      </header>

      <section className="mt-10">
        <h2 className="font-condensed">{de.section.heading}</h2>
        <div className="mt-4">
          <Suspense
            fallback={
              <div className="space-y-6">
                <SkeletonLine width="10rem" />
                <SkeletonLine />
                <SkeletonLine width="12rem" />
                <SkeletonLine />
              </div>
            }
          >
            <SectionBlock
              caseId={akte.id}
              caseNumber={akte.caseNumber}
              templateId={akte.templateId}
              permissions={user.permissions}
              canEdit={canEditCase(user.permissions, akte).ok}
            />
          </Suspense>
        </div>
      </section>

      <div className="mt-12">
        <Suspense
          fallback={
            <div className="grid gap-10 md:grid-cols-2">
              <div className="space-y-3">
                <SkeletonLine width="8rem" />
                <SkeletonLine width="70%" />
              </div>
              <div className="space-y-3">
                <SkeletonLine width="9rem" />
                <SkeletonLine width="65%" />
              </div>
            </div>
          }
        >
          <Relations
            akte={akte}
            permissions={user.permissions}
            canEdit={canEditCase(user.permissions, akte).ok}
          />
        </Suspense>
      </div>

      <section className="mt-12">
        <Suspense
          fallback={
            <div className="space-y-3 border border-line p-4">
              <SkeletonLine width="8rem" />
              <SkeletonLine width="70%" />
              <SkeletonLine width="55%" />
            </div>
          }
        >
          <ChatBlock akte={akte} user={user} />
        </Suspense>
      </section>

      <nav className="mt-12 flex gap-4 border-b border-line pb-2 font-condensed text-xs">
        <span className="text-text-dim">{de.case.timeline}</span>
        <Link href={`/faelle/${akte.caseNumber}/aenderungen`}>{de.case.changes}</Link>
      </nav>

      <section className="mt-6">
        <div className="mt-4">
          <EntryComposer caseNumber={akte.caseNumber} />
        </div>

        <div className="mt-8">
          <Suspense
            fallback={
              <div className="timeline">
                <SkeletonLine width="18rem" />
                <SkeletonLine />
                <SkeletonLine width="80%" />
                <div className="h-4" />
                <SkeletonLine width="16rem" />
                <SkeletonLine width="70%" />
              </div>
            }
          >
            <Timeline
              caseId={akte.id}
              caseNumber={akte.caseNumber}
              permissions={user.permissions}
            />
          </Suspense>
        </div>
      </section>
    </main>
  )
}