"use client"

import { useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const schema = z.object({
  name: z.string().min(1, { message: "Name is required." }),
  code: z.string().min(1, { message: "Phone number is required." }),
})

type FormValues = z.infer<typeof schema>

export interface Customer {
  id: string
  name: string
  code: string
}

export function CustomerForm({
  customerEdit,
  setEditOpen,
  refetchItems,
}: {
  customerEdit: Customer | null
  setEditOpen: React.Dispatch<React.SetStateAction<boolean>>
  refetchItems: () => void
}) {
  const isEditing = customerEdit !== null
  const [serverError, setServerError] = useState<string | null>(null)

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
  })

  async function onSubmit(values: FormValues) {
    setServerError(null)

    const res = await fetch(
      `/api/customers${isEditing ? `/${customerEdit.id}` : ""}`,
      {
        method: isEditing ? "PATCH" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      }
    )
    if (!res.ok) {
      const data = await res.json()
      setServerError(data.error || "An error occurred.")
      return
    }
    setEditOpen(false)
    refetchItems()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="contents">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="name">Name</FieldLabel>
          <Input
            id="name"
            type="text"
            placeholder="John Caramel"
            aria-invalid={!!errors.name}
            {...register("name")}
          />
        </Field>
        <FieldError errors={errors.name ? [errors.name] : []} />

        <Field>
          <FieldLabel htmlFor="code">Code</FieldLabel>
          <Input
            id="code"
            type="text"
            placeholder="jcaramel"
            aria-invalid={!!errors.code}
            {...register("code")}
          />
        </Field>
        <FieldError errors={errors.code ? [errors.code] : []} />
      </FieldGroup>
      <FieldGroup>
        {serverError && (
          <p className="text-sm text-destructive">{serverError}</p>
        )}

        <div className="flex flex-row justify-between">
          <Button
            type="button"
            variant="ghost"
            onClick={() => setEditOpen(false)}
          >
            Cancel
          </Button>
          <Button type="submit" disabled={isSubmitting}>
            Save
          </Button>
        </div>
      </FieldGroup>
    </form>
  )
}