"use client"

import { Button } from "@/components/ui/button"
import { IconInput } from "@/components/ui/icon-input"
import { Label } from "@/components/ui/label"
import { notifySuccess } from "@/lib/toast"
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
import { Mail } from "lucide-react"
import Link from "next/link"
import { useForm } from "react-hook-form"
import { z } from "zod"

const forgotSchema = z.object({
  email: z.string().email("请输入正确的邮箱地址"),
})

export default function ForgotPasswordPage() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: standardSchemaResolver(forgotSchema),
  })

  const onSubmit = async (_data: z.infer<typeof forgotSchema>) => {
    await new Promise((r) => setTimeout(r, 500))
    notifySuccess("重置链接已发送到你的邮箱")
  }

  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="email">邮箱地址</Label>
          <IconInput
            id="email"
            icon={<Mail />}
            type="email"
            placeholder="输入注册邮箱"
            {...register("email")}
          />
          {errors.email && <p className="text-xs text-destructive">{errors.email.message}</p>}
        </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="/login" className="font-medium text-primary hover:underline">
          返回登录
        </Link>
      </p>
    </>
  )
}