"use client"

import * as React from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { toast } from "sonner"
import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import { Checkbox } from "@/shared/components/ui/checkbox"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { cn } from "@/shared/lib/utils"
import { Loader2 } from "lucide-react"
import type { ActionState } from "@/shared/types/action-state"

const ADULT_AGE = 18

function calcAge(birth: string): number | null {
  if (!birth) return null
  const birthDate = new Date(birth)
  if (Number.isNaN(birthDate.getTime())) return null
  const now = new Date()
  let age = now.getFullYear() - birthDate.getFullYear()
  const monthDiff = now.getMonth() - birthDate.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birthDate.getDate())) {
    age -= 1
  }
  return age >= 0 ? age : null
}

type RegisterFormProps = React.HTMLAttributes<HTMLDivElement> & {
  registerAction: (formData: FormData) => Promise<ActionState>
}

export function RegisterForm({ className, registerAction, ...props }: RegisterFormProps) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false)
  const [birthDate, setBirthDate] = React.useState<string>("")
  const [agreedTerms, setAgreedTerms] = React.useState<boolean>(false)
  const [agreedGuardian, setAgreedGuardian] = React.useState<boolean>(false)
  const [guardianRelation, setGuardianRelation] = React.useState<string>("")
  const router = useRouter()

  const age = React.useMemo(() => calcAge(birthDate), [birthDate])
  const isMinor = age !== null && age < ADULT_AGE

  async function onSubmit(event: React.SyntheticEvent) {
    event.preventDefault()

    if (!agreedTerms) {
      toast.error("请阅读并同意《隐私政策》和《用户协议》后再注册")
      return
    }
    if (isMinor && !agreedGuardian) {
      toast.error("未成年人注册须确认已获得监护人同意")
      return
    }
    if (isMinor && !guardianRelation) {
      toast.error("请选择监护人与您的关系")
      return
    }

    setIsLoading(true)
    try {
      const form = event.currentTarget as HTMLFormElement
      const formData = new FormData(form)
      const res = await registerAction(formData)

      if (res.success) {
        toast.success(res.message || "账户创建成功")
        router.push("/login")
        router.refresh()
      } else {
        toast.error(res.message || "注册失败")
      }
    } catch {
      toast.error("注册失败")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className={cn("grid gap-6", className)} {...props}>
      <div className="flex flex-col space-y-2 text-center">
        <h1 className="text-2xl font-semibold tracking-tight">创建账户</h1>
        <p className="text-sm text-muted-foreground">
          填写以下信息以创建您的账户
        </p>
      </div>
      <form onSubmit={onSubmit}>
        <div className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="name">姓名</Label>
            <Input
              id="name"
              name="name"
              placeholder="请输入姓名"
              type="text"
              autoCapitalize="words"
              autoComplete="name"
              autoCorrect="off"
              disabled={isLoading}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="email">邮箱</Label>
            <Input
              id="email"
              name="email"
              placeholder="name@example.com"
              type="email"
              autoCapitalize="none"
              autoComplete="email"
              autoCorrect="off"
              disabled={isLoading}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="password">密码</Label>
            <Input
              id="password"
              name="password"
              type="password"
              autoComplete="new-password"
              disabled={isLoading}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="birthDate">出生日期</Label>
            <Input
              id="birthDate"
              name="birthDate"
              type="date"
              disabled={isLoading}
              value={birthDate}
              onChange={(e) => setBirthDate(e.target.value)}
            />
            {age !== null && (
              <p className="text-xs text-muted-foreground">当前年龄：{age} 岁</p>
            )}
          </div>

          {isMinor && (
            <div className="grid gap-4 rounded-md border border-amber-200 bg-amber-50 p-4 dark:border-amber-900/50 dark:bg-amber-950/30">
              <p className="text-sm font-medium text-amber-900 dark:text-amber-200">
                检测到您是未成年人，请填写监护人信息
              </p>
              <div className="grid gap-2">
                <Label htmlFor="guardianName">监护人姓名</Label>
                <Input
                  id="guardianName"
                  name="guardianName"
                  placeholder="请输入监护人姓名"
                  type="text"
                  disabled={isLoading}
                  required={isMinor}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="guardianPhone">监护人电话</Label>
                <Input
                  id="guardianPhone"
                  name="guardianPhone"
                  placeholder="请输入监护人手机号"
                  type="tel"
                  disabled={isLoading}
                  required={isMinor}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="guardianRelation">监护人与您的关系</Label>
                <Select value={guardianRelation} onValueChange={setGuardianRelation}>
                  <SelectTrigger id="guardianRelation">
                    <SelectValue placeholder="请选择关系" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="父亲">父亲</SelectItem>
                    <SelectItem value="母亲">母亲</SelectItem>
                    <SelectItem value="其他法定监护人">其他法定监护人</SelectItem>
                  </SelectContent>
                </Select>
                <input
                  type="hidden"
                  name="guardianRelation"
                  value={guardianRelation}
                />
              </div>
            </div>
          )}

          <div className="flex items-start gap-2">
            <Checkbox
              id="agreeTerms"
              checked={agreedTerms}
              onCheckedChange={(v) => setAgreedTerms(v === true)}
              disabled={isLoading}
            />
            <Label htmlFor="agreeTerms" className="text-sm leading-relaxed font-normal">
              我已阅读并同意
              <Link
                href="/privacy"
                target="_blank"
                rel="noopener noreferrer"
                className="mx-1 text-primary underline underline-offset-4 hover:opacity-80"
              >
                《隐私政策》
              </Link>
              和
              <Link
                href="/terms"
                target="_blank"
                rel="noopener noreferrer"
                className="mx-1 text-primary underline underline-offset-4 hover:opacity-80"
              >
                《用户协议》
              </Link>
            </Label>
          </div>

          {isMinor && (
            <div className="flex items-start gap-2">
              <Checkbox
                id="agreeGuardian"
                checked={agreedGuardian}
                onCheckedChange={(v) => setAgreedGuardian(v === true)}
                disabled={isLoading}
              />
              <Label htmlFor="agreeGuardian" className="text-sm leading-relaxed font-normal">
                我确认已获得监护人同意使用本服务
              </Label>
            </div>
          )}

          <Button disabled={isLoading}>
            {isLoading && (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            )}
            创建账户
          </Button>
        </div>
      </form>
      <p className="px-8 text-center text-sm text-muted-foreground">
        已有账户？{" "}
        <Link
          href="/login"
          className="underline underline-offset-4 hover:text-primary"
        >
          立即登录
        </Link>
      </p>
    </div>
  )
}
