"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 { login as loginApi } from "@/lib/api"
import { toApiError } from "@/lib/errors"
import { notifyInfo } from "@/lib/toast"
import { useAuthStore } from "@/store/auth"
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
import { Eye, EyeOff, Lock, User } 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({
  username: z.string().min(1, "请输入用户名"),
  password: z.string().min(6, "密码至少6位"),
})

export default function LoginPage() {
  const router = useRouter()
  const { login: storeLogin } = useAuthStore()
  const [showPassword, setShowPassword] = useState(false)
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: standardSchemaResolver(loginSchema),
  })

  const onSubmit = async (data: z.infer<typeof loginSchema>) => {
    try {
      const user = await loginApi({ username: data.username, password: data.password })
      storeLogin(user, user.verifiedRoles)
      router.push("/")
    } catch (err) {
      notifyInfo(toApiError(err).msg)
    }
  }

  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="username">用户名</Label>
          <IconInput
            id="username"
            icon={<User />}
            placeholder="输入用户名"
            {...register("username")}
          />
          {errors.username && <p className="text-xs text-destructive">{errors.username.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>
    </>
  )
}