import Link from "next/link";

import { BindDeviceForm } from "@/components/dashboard-actions";
import { PanelShell } from "@/components/panel-shell";
import { PwaControls } from "@/components/pwa-controls";
import { getCaregiverDevices } from "@/lib/caregiver-panel";
import { formatDateTime, getDeviceName, truncateText } from "@/lib/panel-format";
import { requireCaregiverSession } from "@/lib/page-auth";

export const dynamic = "force-dynamic";

export default async function DevicesPage() {
  const caregiver = await requireCaregiverSession("/devices");
  const devices = await getCaregiverDevices(caregiver.id);

  return (
    <PanelShell
      currentPath="/devices"
      title="设备管理和绑定入口单独放在这里。"
      description="手动粘贴设备码、扫码绑定、查看某台设备的专属页，都统一放在设备页，不再和首页摘要、活动记录混在一起。"
      caregiverToken={caregiver.sessionToken}
      actions={<PwaControls />}
    >
      <section className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
        <BindDeviceForm />

        <div 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>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
            一台设备一个详情页
          </h2>
          <div className="mt-4 space-y-3 rounded-[24px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
            <p>1. 先通过扫码或粘贴设备码建立连接。</p>
            <p>2. 进入设备详情页给这位老人写留言，不再在首页里混排。</p>
            <p>3. 每台设备都有自己的最近留言、对话片段和工具调用摘要。</p>
          </div>

          <div className="mt-6 flex flex-wrap gap-3">
            <Link
              href="/scan"
              className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--olive)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--olive-deep)]"
            >
              打开扫码页
            </Link>
            <Link
              href="/messages"
              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>
        </div>
      </section>

      {devices.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>
        </section>
      ) : (
        <section className="grid gap-6 lg:grid-cols-2">
          {devices.map((binding) => {
            const latestMessage = binding.elderDevice.messages[0];

            return (
              <article
                key={binding.id}
                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>
                <h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
                  {getDeviceName(binding.elderDevice.displayName)}
                </h2>

                <div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--muted)]">
                  <span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
                    最近在线：{formatDateTime(binding.elderDevice.lastSeenAt)}
                  </span>
                  <span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
                    老人新留言 {binding.elderUnreadCount}
                  </span>
                  <span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
                    待老人查看 {binding.familyUnreadCount}
                  </span>
                </div>

                <div className="mt-5 grid gap-3 sm:grid-cols-3">
                  <div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
                    <p className="text-xs text-[var(--muted)]">留言总数</p>
                    <p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
                      {binding.elderDevice._count.messages}
                    </p>
                  </div>
                  <div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
                    <p className="text-xs text-[var(--muted)]">对话条数</p>
                    <p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
                      {binding.elderDevice._count.conversationTurns}
                    </p>
                  </div>
                  <div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
                    <p className="text-xs text-[var(--muted)]">工具调用</p>
                    <p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
                      {binding.elderDevice._count.toolCalls}
                    </p>
                  </div>
                </div>

                <div className="mt-5 rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
                  <p className="text-sm font-semibold text-[var(--ink)]">最近一条动态</p>
                  <p className="mt-2 text-sm leading-7 text-[var(--muted)]">
                    {latestMessage
                      ? truncateText(latestMessage.content, 96)
                      : "这台设备还没有同步到新的留言或问候。"}
                  </p>
                </div>

                <div className="mt-6 flex flex-wrap gap-3">
                  <Link
                    href={`/devices/${binding.elderDevice.deviceUuid}`}
                    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="/messages"
                    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>
              </article>
            );
          })}
        </section>
      )}
    </PanelShell>
  );
}