nexarch/web/mail-search/app/mail/[messageId]/page.tsx

"use client";

import { use } from "react";
import { useSearchParams } from "next/navigation";
import { splitHighlighted } from "../../../lib/highlight";
import { HIGHLIGHT_BG_LIGHT, HIGHLIGHT_FG_LIGHT } from "../../../lib/highlightColors";
import CaseContextPanel from "./CaseContextPanel";
import { AttachmentList } from "./AttachmentList";

// SRC-04 Akzeptanzkriterium 2: Klick auf einen Suchtreffer öffnet die Mail
// direkt an der Fundstelle. Der vollständige Mail-Inhaltsabruf (Betreff/
// Text laden anhand messageId) ist NICHT Bestandteil dieser Kachel — dafür
// gibt es noch keine HTTP-API (folgt mit INT-01). Bis dahin trägt der
// Suchtreffer-Link Betreff-/Text-Snippet als Kontext mit, damit die
// Fundstelle bereits jetzt real anspring- und hervorhebbar ist; die
// vollständige Mail-Ansicht wird von einer späteren Kachel ergänzt.
function Highlighted({ text }: { text: string }) {
  return (
    <>
      {splitHighlighted(text).map((segment, idx) =>
        segment.matched ? (
          <mark
            key={idx}
            id={idx === 0 ? "fundstelle" : undefined}
            style={{ background: HIGHLIGHT_BG_LIGHT, color: HIGHLIGHT_FG_LIGHT, padding: "0 2px" }}
          >
            {segment.text}
          </mark>
        ) : (
          <span key={idx}>{segment.text}</span>
        )
      )}
    </>
  );
}

export default function MailDetailPage({ params }: { params: Promise<{ messageId: string }> }) {
  const { messageId } = use(params);
  const searchParams = useSearchParams();
  const subject = searchParams.get("subject") ?? "";
  const snippet = searchParams.get("snippet") ?? "";
  const tenant = searchParams.get("tenant") ?? "";

  return (
    <main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
      <p>
        <a href="/">← Zurück zur Suche</a>
      </p>
      <h1>
        {subject ? <Highlighted text={subject} /> : messageId}
      </h1>
      {snippet && (
        <p>
          <Highlighted text={snippet} />
        </p>
      )}
      <CaseContextPanel messageId={messageId} tenant={tenant} />
      <AttachmentList messageId={messageId} />
    </main>
  );
}