"use client"

import { toastApiError } from "@/lib/toast-api-error";
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { Send } from "lucide-react"
import { useFieldArray, useForm } from "react-hook-form"
import { toast } from "sonner"

import { FormPageHeader, FormSaveBar } from "@/app/dashboard/_components/form"
import { createDeliveryServer } from "@/components/settings/delivery-servers/api/delivery-servers.api"
import { getDeliveryServerCreateDefaults } from "@/components/settings/delivery-servers/data/delivery-server-create.defaults"
import { getDeliveryServerDetailFields } from "@/components/settings/delivery-servers/data/delivery-server-field-sections"
import { getDeliveryServerTypeMeta } from "@/components/settings/delivery-servers/data/delivery-server-types"
import { AdditionalHeadersSection } from "@/components/settings/delivery-servers/create/components/additional-headers-section"
import { CustomerSection } from "@/components/settings/delivery-servers/create/components/customer-section"
import { DeliveryServerRhfFields } from "@/components/settings/delivery-servers/create/components/delivery-server-rhf-fields"
import { DomainPoliciesSection } from "@/components/settings/delivery-servers/create/components/domain-policies-section"
import {
  deliveryServerCreateSchema,
  type DeliveryServerCreateFormValues,
} from "@/components/settings/delivery-servers/create/schema"
import { SettingsCard } from "@/components/settings/ui/settings-card"
import type { DeliveryServerType } from "@/components/settings/delivery-servers/types"

type DeliveryServerCreateFormProps = {
  serverType: DeliveryServerType
}

export function DeliveryServerCreateForm({
  serverType,
}: DeliveryServerCreateFormProps) {
  const router = useRouter()
  const meta = getDeliveryServerTypeMeta(serverType)
  const detailFields = getDeliveryServerDetailFields(serverType)

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<DeliveryServerCreateFormValues>({
    resolver: zodResolver(deliveryServerCreateSchema),
    defaultValues: getDeliveryServerCreateDefaults(serverType),
    mode: "onBlur",
  })

  const domainPoliciesArray = useFieldArray({
    control,
    name: "domainPolicies",
  })

  const additionalHeadersArray = useFieldArray({
    control,
    name: "additionalHeaders",
  })

  const onSubmit = async (values: DeliveryServerCreateFormValues) => {
    try {
      await createDeliveryServer(values)
      toast.success("Delivery server created")
      router.push("/dashboard/settings/delivery-servers")
    } catch (error) {
      toastApiError(error, "Failed to create delivery server")
    }
  }

  if (!meta) {
    return null
  }

  return (
    <form onSubmit={(e) => void handleSubmit(onSubmit)(e)} className="flex flex-col">
      <FormPageHeader
        backHref="/dashboard/settings/delivery-servers"
        parentLabel="Delivery servers"
        currentLabel="Create"
        titleIcon={<Send className="size-4 text-primary" />}
        title={meta.pageHeading}
        description={meta.description}
      />

      <div className="space-y-6">
        <SettingsCard
          title="Server details"
          description="Connection, sender identity, quotas, and delivery options."
        >
          <DeliveryServerRhfFields
            fields={detailFields}
            control={control}
            errors={errors}
          />
        </SettingsCard>

        <CustomerSection control={control} errors={errors} />

        <DomainPoliciesSection
          control={control}
          errors={errors}
          fieldArray={domainPoliciesArray}
        />

        <AdditionalHeadersSection
          control={control}
          errors={errors}
          fieldArray={additionalHeadersArray}
        />
      </div>

      <FormSaveBar
        cancelHref="/dashboard/settings/delivery-servers"
        isSaving={isSubmitting}
      />
    </form>
  )
}