"use client"

import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"

import { FormSaveBar } from "@/app/dashboard/_components/form"
import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { RichTextEditor } from "@/components/settings/common-template/components/rich-text-editor"
import { createEmailTemplate } from "@/components/settings/email-templates/api/email-templates.api"
import { AvailableTagsLink } from "@/components/settings/email-templates/create/components/available-tags-link"
import {
  emailTemplateCreateSchema,
  type EmailTemplateCreateFormValues,
} from "@/components/settings/email-templates/create/schema"
import { EMAIL_TEMPLATE_CATEGORY_OPTIONS } from "@/components/settings/email-templates/data/email-template-categories"
import { SettingsInput } from "@/components/settings/ui/settings-input"
import { SettingsSelect } from "@/components/settings/ui/settings-select"

const defaultValues: EmailTemplateCreateFormValues = {
  name: "",
  subject: "",
  category: "account",
  content: "",
}

export function EmailTemplateCreateForm() {
  const router = useRouter()

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<EmailTemplateCreateFormValues>({
    resolver: zodResolver(emailTemplateCreateSchema),
    defaultValues,
    mode: "onBlur",
  })

  const onSubmit = async (values: EmailTemplateCreateFormValues) => {
    try {
      await createEmailTemplate(values)
      toast.success("Email template created")
      router.push("/dashboard/settings/email-templates")
    } catch {
      toast.error("Failed to create email template")
    }
  }

  return (
    <form onSubmit={(e) => void handleSubmit(onSubmit)(e)} className="flex flex-col">
      <div className="space-y-6">
        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-x-5 sm:gap-y-4">
          <Field data-invalid={!!errors.name} className="gap-1.5">
            <FieldLabel htmlFor="email-template-name" className="text-sm font-medium">
              Name <span className="text-destructive">*</span>
            </FieldLabel>
            <Controller
              name="name"
              control={control}
              render={({ field }) => (
                <SettingsInput
                  id="email-template-name"
                  placeholder="Name"
                  {...field}
                />
              )}
            />
            <FieldError
              errors={
                errors.name?.message
                  ? [{ message: String(errors.name.message) }]
                  : undefined
              }
            />
          </Field>

          <Field data-invalid={!!errors.subject} className="gap-1.5">
            <FieldLabel htmlFor="email-template-subject" className="text-sm font-medium">
              Subject
            </FieldLabel>
            <Controller
              name="subject"
              control={control}
              render={({ field }) => (
                <SettingsInput
                  id="email-template-subject"
                  placeholder="Subject"
                  {...field}
                />
              )}
            />
            <FieldError
              errors={
                errors.subject?.message
                  ? [{ message: String(errors.subject.message) }]
                  : undefined
              }
            />
          </Field>

          <Field
            data-invalid={!!errors.category}
            className="gap-1.5 sm:col-span-2"
          >
            <FieldLabel
              htmlFor="email-template-category"
              className="text-sm font-medium"
            >
              Category
            </FieldLabel>
            <Controller
              name="category"
              control={control}
              render={({ field }) => (
                <SettingsSelect
                  value={field.value}
                  onValueChange={field.onChange}
                  options={EMAIL_TEMPLATE_CATEGORY_OPTIONS}
                  placeholder="Category"
                />
              )}
            />
            <FieldError
              errors={
                errors.category?.message
                  ? [{ message: String(errors.category.message) }]
                  : undefined
              }
            />
          </Field>
        </div>

        <Field data-invalid={!!errors.content} className="gap-1.5">
          <div className="flex flex-wrap items-center gap-2">
            <FieldLabel
              htmlFor="email-template-content"
              className="text-sm font-medium"
            >
              Content <span className="text-destructive">*</span>
            </FieldLabel>
            <AvailableTagsLink />
          </div>
          <Controller
            name="content"
            control={control}
            render={({ field }) => (
              <RichTextEditor
                value={field.value}
                onChange={field.onChange}
                minHeight={400}
              />
            )}
          />
          <FieldError
            errors={
              errors.content?.message
                ? [{ message: String(errors.content.message) }]
                : undefined
            }
          />
        </Field>
      </div>

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