"use client"

import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
import { Gamepad2 } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { currentUser } from "@/lib/mock"
import { useAuthStore } from "@/store/auth"

const registerSchema = z
  .object({
    nickname: z.string().min(2, "昵称至少2个字符"),
    phone: z.string().min(11, "请输入正确的手机号"),
    password: z.string().min(6, "密码至少6位"),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "两次密码不一致",
    path: ["confirmPassword"],
  })

export default function RegisterPage() {
  const router = useRouter()
  const { login } = useAuthStore()
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: standardSchemaResolver(registerSchema),
  })

  const onSubmit = async (_data: z.infer<typeof registerSchema>) => {
    await new Promise((r) => setTimeout(r, 500))
    login(currentUser, ["consumer"])
    router.push("/")
  }

  return (
    <div className="space-y-8 bg-background p-8 rounded-xl border shadow-sm md:border-0 md:shadow-none md:p-0">
      <div className="flex flex-col gap-2">
        <div className="flex items-center gap-2 md:hidden mb-4">
          <div className="rounded-lg bg-primary/10 p-2">
            <Gamepad2 className="h-6 w-6 text-primary" />
          </div>
          <span className="text-xl font-bold">聚玩</span>
        </div>
        <h1 className="text-2xl font-bold tracking-tight">创建账号</h1>
        <p className="text-sm text-muted-foreground">创建你的聚玩账号</p>
      </div>
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="nickname">昵称</Label>
          <Input id="nickname" placeholder="请输入昵称" {...register("nickname")} />
          {errors.nickname && <p className="text-xs text-destructive">{errors.nickname.message}</p>}
        </div>
        <div className="space-y-2">
          <Label htmlFor="phone">手机号</Label>
          <Input id="phone" placeholder="请输入手机号" {...register("phone")} />
          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">密码</Label>
          <Input id="password" type="password" placeholder="请输入密码" {...register("password")} />
          {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
        </div>
        <div className="space-y-2">
          <Label htmlFor="confirmPassword">确认密码</Label>
          <Input
            id="confirmPassword"
            type="password"
            placeholder="请再次输入密码"
            {...register("confirmPassword")}
          />
          {errors.confirmPassword && (
            <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
          )}
        </div>
        <Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? "注册中..." : "注册"}
        </Button>
      </form>
      <p className="text-center text-sm text-muted-foreground">
        已有账号？{" "}
        <Link href="/login" className="text-primary underline-offset-4 hover:underline">
          立即登录
        </Link>
      </p>
    </div>
  )
}