import Link from "next/link";

import { PanelShell } from "@/components/panel-shell";
import { ScanClient } from "@/components/scan-client";
import { requireCaregiverSession } from "@/lib/page-auth";
import { getCaregiverDisplayName } from "@/lib/session";

export const dynamic = "force-dynamic";

export default async function ScanPage() {
  const caregiver = await requireCaregiverSession("/scan");

  return (
    <PanelShell
      currentPath="/scan"
      title="扫码连接"
      description="把镜头对准长辈手机上的二维码，识别后会自动完成连接并跳转到绑定结果。"
      caregiverLabel={getCaregiverDisplayName(caregiver)}
    >
      <section className="grid gap-6 xl:grid-cols-[0.88fr_1.12fr]">
        <article 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>
          <p className="mt-4 text-base leading-8 text-[var(--muted)]">
            扫描成功后，系统会自动把长辈的设备连接到当前账号。连接完成后，就能继续查看留言、动态和设备详情。
          </p>

          <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-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)]">
              如果当前设备没有摄像头，或者浏览器没有拿到拍照权限，可以回到设备页，改用粘贴设备码的方式继续连接。
            </p>
          </div>

          <div className="mt-6 flex flex-wrap gap-3">
            <Link
              href="/devices"
              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>
          </div>
        </article>

        <ScanClient />
      </section>
    </PanelShell>
  );
}