"use client"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { IconInput } from "@/components/ui/icon-input"
import { Label } from "@/components/ui/label"
import { getCurrentUserForLogin } from "@/lib/api"
import { useAuthStore } from "@/store/auth"
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
import { Eye, EyeOff, Lock, Phone } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

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 [showPassword, setShowPassword] = useState(false)
  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 (
    <>
      <div className="mb-8">
        <h2 className="text-2xl font-bold">欢迎回来</h2>
        <p className="mt-2 text-sm text-muted-foreground">登录你的聚玩账号，继续游戏之旅</p>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div className="space-y-1.5">
          <Label htmlFor="phone">手机号</Label>
          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
        </div>

        <div className="space-y-1.5">
          <div className="flex items-center justify-between">
            <Label htmlFor="password">密码</Label>
            <Link
              href="/forgot-password"
              className="text-xs text-primary hover:underline"
              tabIndex={-1}
            >
              忘记密码?
            </Link>
          </div>
          <IconInput
            id="password"
            icon={<Lock />}
            type={showPassword ? "text" : "password"}
            placeholder="输入密码"
            rightElement={
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="text-muted-foreground hover:text-foreground"
                tabIndex={-1}
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            }
            {...register("password")}
          />
          {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
        </div>

        <div className="flex items-center gap-2 pt-1">
          <Checkbox id="remember" />
          <label htmlFor="remember" className="text-xs text-muted-foreground">
            记住登录状态
          </label>
        </div>

        <Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
          {isSubmitting ? "登录中..." : "登录"}
        </Button>
      </form>

      <p className="mt-8 text-center text-sm text-muted-foreground">
        还没有账号？{" "}
        <Link href="/register" className="font-medium text-primary hover:underline">
          立即注册
        </Link>
      </p>
    </>
  )
}