"use client"

import {Link} from "@/i18n/navigation"
import {useTranslations} from "next-intl"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

const schema = z.object({
  email: z.string().email("Enter a valid email."),
})

export default function Page() {
  const t = useTranslations("Auth.ForgotPassword")
  const tc = useTranslations("Common")

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { email: "" },
  })

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("title")}</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form className="gap-4 grid" onSubmit={form.handleSubmit(() => {})}>
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{tc("labels.email")}</FormLabel>
                  <FormControl>
                    <Input placeholder={tc("placeholders.agentEmail")} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full">
              {tc("actions.sendResetLink")}
            </Button>
            <Button variant="link" asChild className="px-0">
              <Link href="/login">{tc("actions.backToLogin")}</Link>
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}