import Link from "next/link";

import { PanelShell } from "@/components/panel-shell";
import { PwaControls } from "@/components/pwa-controls";
import { getCaregiverMessages } from "@/lib/caregiver-panel";
import {
  formatDateTime,
  getDeviceName,
  getImportanceLabel,
  getMessageDirectionLabel,
  getMessageHref,
  getMessageStatusLabel,
  truncateText,
} from "@/lib/panel-format";
import { requireCaregiverSession } from "@/lib/page-auth";

export const dynamic = "force-dynamic";

export default async function MessagesPage() {
  const caregiver = await requireCaregiverSession("/messages");
  const { messages, unreadIncomingCount, unreadOutgoingCount } =
    await getCaregiverMessages(caregiver.id);

  const incomingMessages = messages.filter(
    (message) => message.direction === "ELDER_TO_FAMILY",
  );
  const outgoingMessages = messages.filter(
    (message) => message.direction === "FAMILY_TO_ELDER",
  );

  return (
    <PanelShell
      currentPath="/messages"
      title="留言独立成页后，每条消息都能用编号直达。"
      description="不论是老人留给家里的话，还是家属写给老人的问候，都集中在这里。点击任何一条卡片，都会进入带 URL 编号的详情页。"
      caregiverToken={caregiver.sessionToken}
      actions={<PwaControls />}
    >
      <section className="grid gap-4 md:grid-cols-3">
        <div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
          <p className="text-sm text-[var(--muted)]">全部留言</p>
          <p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
            {messages.length}
          </p>
        </div>
        <div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
          <p className="text-sm text-[var(--muted)]">老人给家里的未读留言</p>
          <p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
            {unreadIncomingCount}
          </p>
        </div>
        <div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
          <p className="text-sm text-[var(--muted)]">待老人查看的家属留言</p>
          <p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
            {unreadOutgoingCount}
          </p>
        </div>
      </section>

      {messages.length === 0 ? (
        <section className="rounded-[32px] border border-dashed border-[var(--line)] bg-white/72 px-6 py-10 text-center shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
          <h2 className="font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
            还没有留言记录
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-base leading-8 text-[var(--muted)]">
            去设备页给老人留一句问候，或等待老人通过桥接工具给家里捎话；新记录会自动出现在这里，并带有可分享的消息编号。
          </p>
          <div className="mt-6 flex justify-center gap-3">
            <Link
              href="/devices"
              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="/scan"
              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>
        </section>
      ) : (
        <section className="grid gap-6 xl:grid-cols-2">
          {[
            {
              title: "老人给家里的留言",
              subtitle: "收到新话时也会从这里直达详情页。",
              items: incomingMessages,
            },
            {
              title: "家属给老人的问候",
              subtitle: "写出去的每条问候也有独立 URL，可回看送达状态。",
              items: outgoingMessages,
            },
          ].map((section) => (
            <div
              key={section.title}
              className="rounded-[32px] border border-white/75 bg-white/80 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>
              <h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
                {section.title}
              </h2>
              <p className="mt-3 text-sm leading-7 text-[var(--muted)]">{section.subtitle}</p>

              <div className="mt-5 space-y-3">
                {section.items.length === 0 ? (
                  <p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
                    这一侧暂时还没有留言。
                  </p>
                ) : (
                  section.items.map((message) => (
                    <Link
                      key={message.id}
                      href={getMessageHref(message.publicId)}
                      className="block rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 transition hover:bg-white"
                    >
                      <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--muted)]">
                        <span className="rounded-full bg-white px-3 py-1 font-semibold text-[var(--ink)]">
                          #{message.publicId}
                        </span>
                        <span>{getMessageDirectionLabel(message.direction)}</span>
                        <span>{getDeviceName(message.elderDevice.displayName)}</span>
                        <span>{getImportanceLabel(message.importance)}</span>
                        <span>{getMessageStatusLabel(message)}</span>
                      </div>
                      <p className="mt-3 text-sm leading-7 text-[var(--ink)]">
                        {truncateText(message.content, 112)}
                      </p>
                      <p className="mt-3 text-xs text-[var(--muted)]">
                        创建于 {formatDateTime(message.createdAt)}
                      </p>
                    </Link>
                  ))
                )}
              </div>
            </div>
          ))}
        </section>
      )}
    </PanelShell>
  );
}