"use client"

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

import { useAuth } from "@/app/providers/auth-provider"
import { FormSection } from "@/components/form-section"
import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { useAccount } from "@/hooks/api/use-account"
import { useUpdateAccount } from "@/hooks/api/use-update-account"
import type { SessionUser } from "@/lib/auth/session-user"

const schema = z.object({
  firstName: z.string().min(1, "First name is required."),
  lastName: z.string().min(1, "Last name is required."),
  email: z.string().email("Enter a valid email."),
})

export function AccountForm({ initialUser }: { initialUser: SessionUser }) {
  const t = useTranslations("Auth.Account")
  const tc = useTranslations("Common")
  const { user: sessionUser } = useAuth()
  const { data: account } = useAccount(initialUser)
  const updateMutation = useUpdateAccount()
  const router = useRouter()

  const user = account ?? sessionUser

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

  useEffect(() => {
    const parts = user.name.trim().split(/\s+/)
    const firstName = parts[0] ?? ""
    const lastName = parts.slice(1).join(" ")
    form.reset({
      firstName,
      lastName,
      email: user.email,
    })
  }, [user.name, user.email, form])

  return (
    <div className="flex flex-col gap-2 md:gap-4 py-4 md:py-6">
      <PageHeader title={t("title")} description={t("description")} />

      <Form {...form}>
        <form
          className="flex flex-col gap-6"
          onSubmit={form.handleSubmit((values) =>
            updateMutation.mutate(
              {
                first_name: values.firstName,
                last_name: values.lastName,
                email: values.email,
              },
              {
                onSuccess: () => {
                  form.reset(values)
                  router.refresh()
                },
              }
            )
          )}
        >
          <FormSection title={t("sectionProfile")}>
            <div className="gap-4 grid md:grid-cols-2">
              <FormField
                control={form.control}
                name="firstName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("labels.firstName")}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="lastName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("labels.lastName")}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem className="md:col-span-2">
                    <FormLabel>{tc("labels.email")}</FormLabel>
                    <FormControl>
                      <Input type="email" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </FormSection>

          {updateMutation.isSuccess ? (
            <p className="text-muted-foreground text-sm">{t("saved")}</p>
          ) : null}
          {updateMutation.isError ? (
            <p className="text-destructive text-sm">
              {updateMutation.error instanceof Error
                ? updateMutation.error.message
                : tc("api.errorFallback")}
            </p>
          ) : null}

          <div className="flex justify-end px-6">
            <Button type="submit" disabled={updateMutation.isPending}>
              {updateMutation.isPending ? tc("api.saving") : tc("actions.saveChanges")}
            </Button>
          </div>
        </form>
      </Form>
    </div>
  )
}