import { redirect } from "next/navigation";

import { AccountAuthForm } from "@/components/account-auth-form";
import {
  getCaregiverSession,
  sanitizeCaregiverRedirectPath,
} from "@/lib/session";

export const dynamic = "force-dynamic";

type LoginPageProps = {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
};

export default async function LoginPage({ searchParams }: LoginPageProps) {
  const caregiver = await getCaregiverSession();
  const params = await searchParams;
  const redirectTo = sanitizeCaregiverRedirectPath(
    typeof params.redirectTo === "string" ? params.redirectTo : null,
  );

  if (caregiver) {
    redirect(redirectTo);
  }

  return (
    <main className="mx-auto flex min-h-screen max-w-6xl items-center px-4 py-8 sm:px-6 lg:px-8">
      <section className="grid w-full gap-6 lg:grid-cols-[0.95fr_1.05fr]">
        <div className="relative overflow-hidden rounded-[40px] border border-white/75 bg-[linear-gradient(160deg,rgba(53,84,141,0.95),rgba(28,45,80,0.94))] p-7 text-white shadow-[0_36px_90px_rgba(53,84,141,0.24)] sm:p-8">
          <div className="absolute -right-10 top-[-40px] h-44 w-44 rounded-full bg-white/10 blur-2xl" />
          <div className="absolute bottom-[-48px] left-[-12px] h-40 w-40 rounded-full border border-white/16" />

          <p className="relative text-sm font-semibold tracking-[0.22em] text-white/78 uppercase">
            家人连线
          </p>
          <h1 className="relative mt-5 font-[family-name:var(--font-display)] text-4xl leading-[1.18] sm:text-5xl">
            用同一个账号，
            <br />
            在每一台家属设备上继续守护
          </h1>
          <p className="relative mt-5 max-w-2xl text-base leading-8 text-white/78 sm:text-lg">
            现在开始，设备连接、留言记录和消息提醒都按账号归属。您在手机、平板或电脑上登录同一个账号，长辈发来的新留言都会一起送达。
          </p>

          <div className="relative mt-8 grid gap-3">
            {[
              "绑定过的长辈设备会跟随账号保留，不再分散到不同浏览器会话。",
              "一台设备开了提醒，另一台设备也登录同一个账号时，同样可以独立接收推送。",
              "登录后会自动回到刚才的页面，扫码和绑定流程不用重新开始。",
            ].map((item) => (
              <div
                key={item}
                className="rounded-[22px] border border-white/12 bg-white/8 px-5 py-4 text-sm leading-7 text-white/84"
              >
                {item}
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-5">
          <div className="rounded-[32px] border border-white/75 bg-white/80 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)] sm:p-7">
            <p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
              账号登录
            </p>
            <h2 className="mt-3 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
              先登录，再继续刚才的操作
            </h2>
            <p className="mt-3 text-sm leading-7 text-[var(--muted)]">
              如果您刚刚在扫码或添加设备，登录完成后会自动回到原来的页面，不需要重新输入。
            </p>
          </div>

          <AccountAuthForm redirectTo={redirectTo} />
        </div>
      </section>
    </main>
  );
}