"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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { getCurrentUserForLogin } from "@/lib/api"
import { useAuthStore } from "@/store/auth"

const loginSchema = z.object({
  phone: z.string().min(11, "请输入正确的手机号"),
  password: z.string().min(6, "密码至少6位"),
})

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

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

  return (
    <Card className="hover:shadow-[var(--shadow-card)]">
      <CardHeader className="space-y-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>
        <CardTitle className="text-2xl font-bold tracking-tight">欢迎回来</CardTitle>
        <CardDescription>登录你的账号以继续</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <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>
          <Button type="submit" className="w-full" disabled={isSubmitting}>
            {isSubmitting ? "登录中..." : "登录"}
          </Button>
        </form>
        <p className="text-center text-sm text-muted-foreground">
          还没有账号？{" "}
          <Link href="/register" className="text-primary underline-offset-4 hover:underline">
            立即注册
          </Link>
        </p>
      </CardContent>
    </Card>
  )
}