digital-human-monitor-v2/app/messages/[messageId]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";

import { PanelShell } from "@/components/panel-shell";
import { getCaregiverMessageDetail } from "@/lib/caregiver-panel";
import {
  formatDateTime,
  getDeviceName,
  getImportanceLabel,
  getMessageDirectionLabel,
  getMessageStatusLabel,
} from "@/lib/panel-format";
import { requireCaregiverSession } from "@/lib/page-auth";
import { getCaregiverDisplayName } from "@/lib/session";

export const dynamic = "force-dynamic";

type MessageDetailPageProps = {
  params: Promise<{ messageId: string }>;
};

export default async function MessageDetailPage({ params }: MessageDetailPageProps) {
  const { messageId } = await params;
  const publicId = Number.parseInt(messageId, 10);

  if (!Number.isFinite(publicId) || publicId <= 0) {
    notFound();
  }

  const caregiver = await requireCaregiverSession(`/messages/${publicId}`);
  const message = await getCaregiverMessageDetail(caregiver.id, publicId);

  if (!message) {
    notFound();
  }

  return (
    <PanelShell
      currentPath="/messages"
      title={`留言 #${message.publicId}`}
      description="查看这条留言的完整内容和设备信息。"
      caregiverLabel={getCaregiverDisplayName(caregiver)}
    >
      <section className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <article className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
          <div className="flex flex-wrap items-center gap-2 text-sm text-[var(--muted)]">
            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1 font-semibold text-[var(--ink)]">
              #{message.publicId}
            </span>
            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
              {getMessageDirectionLabel(message.direction)}
            </span>
            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
              {getImportanceLabel(message.importance)}
            </span>
            <span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
              {getMessageStatusLabel(message)}
            </span>
          </div>

          <h2 className="mt-5 font-[family-name:var(--font-display)] text-4xl leading-[1.2] text-[var(--ink)]">
            {message.content}
          </h2>

          {message.recipientRelation ? (
            <p className="mt-4 text-sm leading-7 text-[var(--muted)]">
              目标对象：{message.recipientRelation}
            </p>
          ) : null}
        </article>

        <aside className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
          <p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
            设备信息
          </p>
          <div className="mt-5 space-y-4 text-sm leading-7 text-[var(--muted)]">
            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
              <p>所属设备</p>
              <p className="mt-2 font-semibold text-[var(--ink)]">
                {getDeviceName(message.elderDevice.displayName)}
              </p>
            </div>
            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
              <p>设备标识</p>
              <p className="mt-2 break-all font-semibold text-[var(--ink)]">
                {message.elderDevice.deviceUuid}
              </p>
            </div>
            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
              <p>创建时间</p>
              <p className="mt-2 font-semibold text-[var(--ink)]">
                {formatDateTime(message.createdAt)}
              </p>
            </div>
            <div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
              <p>最近在线</p>
              <p className="mt-2 font-semibold text-[var(--ink)]">
                {formatDateTime(message.elderDevice.lastSeenAt)}
              </p>
            </div>
          </div>

          <div className="mt-6 flex flex-wrap gap-3">
            <Link
              href="/messages"
              className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--copper)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--copper-deep)]"
            >
              返回留言板
            </Link>
            <Link
              href={`/devices/${message.elderDevice.deviceUuid}`}
              className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
            >
              查看设备
            </Link>
          </div>
        </aside>
      </section>
    </PanelShell>
  );
}