import { PanelShell } from "@/components/panel-shell";
import { PwaControls } from "@/components/pwa-controls";
import { PushTestPanel } from "@/components/push-test-panel";
import { getCaregiverSettingsOverview } from "@/lib/caregiver-panel";
import { requireCaregiverSession } from "@/lib/page-auth";
import { getCaregiverDisplayName } from "@/lib/session";

export const dynamic = "force-dynamic";

export default async function SettingsPage() {
  const caregiver = await requireCaregiverSession("/settings");
  const overview = await getCaregiverSettingsOverview(caregiver.id);

  return (
    <PanelShell
      currentPath="/settings"
      title="设置"
      description="桌面版安装、消息提醒和推送测试统一放在这里，不再分散显示在各个页面。"
      caregiverLabel={getCaregiverDisplayName(caregiver)}
    >
      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
          <p className="text-sm text-[var(--muted)]">已连接设备</p>
          <p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
            {overview.deviceCount}
          </p>
        </div>
        <div className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
          <p className="text-sm text-[var(--muted)]">已开启提醒的设备</p>
          <p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
            {overview.pushSubscriptionCount}
          </p>
        </div>
      </section>

      <section className="grid gap-6 xl:grid-cols-2">
        <PwaControls />
        <PushTestPanel
          initialSubscriptionCount={overview.pushSubscriptionCount}
          deviceCount={overview.deviceCount}
        />
      </section>
    </PanelShell>
  );
}