import type { Metadata } from 'next'
import { LoginRequiredActions } from './LoginRequiredActions'
import { safeInternalHref } from '@/lib/navigation'

export const metadata: Metadata = { title: '需要登录' }

export default async function LoginRequiredPage({
  searchParams,
}: {
  searchParams: Promise<{ redirect?: string; action?: string }>
}) {
  const params = await searchParams
  const redirect = safeInternalHref(params.redirect || '/', '/')
  const loginHref = `/login?redirect=${encodeURIComponent(redirect)}`

  return (
    <section className="relative flex min-h-[calc(100vh-70px)] items-center overflow-hidden bg-[linear-gradient(120deg,#f7faff_0%,#edf4ff_46%,#ffffff_46%,#ffffff_100%)] md:min-h-[calc(100vh-106px)]">
      <div className="absolute left-0 top-0 h-full w-[18vw] border-r border-white/70 bg-white/25" aria-hidden />
      <div className="absolute bottom-0 right-0 h-32 w-[42vw] border-t border-line bg-bg/70" aria-hidden />

      <div className="relative mx-auto w-full max-w-[840px] px-6 py-10">
        <div className="bg-white/72 p-10 shadow-[0_24px_80px_rgba(15,23,42,0.12)] backdrop-blur-md md:p-14">
          <h1 className="text-[34px] font-extrabold leading-tight text-ink md:text-[46px]">请注册登录账号继续</h1>
          <LoginRequiredActions loginHref={loginHref} fallbackHref={redirect} />
        </div>
      </div>
    </section>
  )
}
