"use client"

import { Suspense } from "react"
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"
import { ApiError } from "@/lib/api/errors"
import { useLogin } from "@/hooks/api/use-login"

const schema = z.object({
  email: z.string().email("Enter a valid email."),
  password: z.string().min(1, "Password is required."),
})

function LoginForm() {
  const t = useTranslations("Auth.Login")
  const tc = useTranslations("Common")
  const loginMutation = useLogin()

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

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("title")}</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form
            className="gap-4 grid"
            onSubmit={form.handleSubmit((values) => loginMutation.mutate(values))}
          >
            {loginMutation.isError ? (
              <p className="text-destructive text-sm" role="alert">
                {loginMutation.error instanceof ApiError &&
                loginMutation.error.status === 401
                  ? t("sessionFailed")
                  : loginMutation.error instanceof Error
                    ? loginMutation.error.message
                    : t("loginFailed")}
              </p>
            ) : null}

            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{tc("labels.email")}</FormLabel>
                  <FormControl>
                    <Input placeholder={tc("placeholders.agentEmail")} {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{tc("labels.password")}</FormLabel>
                  <FormControl>
                    <Input type="password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="flex justify-between items-center">
              <Button variant="link" asChild className="px-0">
                <Link href="/forgot-password">{t("forgotPassword")}</Link>
              </Button>
            </div>

            <Button type="submit" className="w-full" disabled={loginMutation.isPending}>
              {loginMutation.isPending ? tc("api.signingIn") : tc("actions.signIn")}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <LoginForm />
    </Suspense>
  )
}