"use client"

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

import {
  FormPageHeader,
  FormPanel,
  FormSaveBar,
} from "@/app/dashboard/_components/form"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { createXrateXmlUpload } from "@/components/xml-apis/xrate-xml-upload/api/xrate-xml-upload.api"
import {
  xrateXmlUploadCreateSchema,
  type XrateXmlUploadCreateFormValues,
} from "@/components/xml-apis/xrate-xml-upload/create/schema"
import { XML_API_BANK_NAME_OPTIONS } from "@/components/xml-apis/shared/bank-name-options"
import { XmlFileDropzone } from "@/components/xml-apis/shared/xml-file-dropzone"
import {
  validateXmlFiles,
  XML_UPLOAD_MAX_FILES,
  XML_UPLOAD_MAX_FILE_SIZE_MB,
} from "@/components/xml-apis/shared/xml-upload-validation"
import { SettingsSelect } from "@/components/settings/ui/settings-select"

const listHref = "/dashboard/xml-apis/xrate-xml-upload"

export function XrateXmlUploadCreateForm() {
  const router = useRouter()
  const [fileNames, setFileNames] = React.useState<string[]>([])
  const [selectedFiles, setSelectedFiles] = React.useState<File[]>([])
  const [fileError, setFileError] = React.useState<string | null>(null)

  const form = useForm<XrateXmlUploadCreateFormValues>({
    resolver: zodResolver(xrateXmlUploadCreateSchema),
    defaultValues: { bankName: "please-select", fileName: "", fileCount: 0 },
    mode: "onBlur",
  })

  const {
    control,
    handleSubmit,
    setValue,
    formState: { errors, isSubmitting },
  } = form

  const applyFiles = (files: File[]) => {
    const validationError = validateXmlFiles(files)
    if (validationError) {
      setFileError(validationError)
      setFileNames([])
      setSelectedFiles([])
      setValue("fileName", "", { shouldValidate: true })
      setValue("fileCount", 0, { shouldValidate: true })
      return
    }
    setFileError(null)
    const names = files.map((f) => f.name)
    setFileNames(names)
    setSelectedFiles(files)
    setValue("fileName", names[0] ?? "", { shouldValidate: true })
    setValue("fileCount", names.length, { shouldValidate: true })
  }

  const onSubmit = handleSubmit(async (values) => {
    try {
      await createXrateXmlUpload(values, selectedFiles)
      toast.success("XRate XML upload created")
      router.push(listHref)
    } catch {
      toast.error("Failed to save")
    }
  })

  return (
    <form onSubmit={(e) => void onSubmit(e)} className="pb-4">
      <FormPageHeader
        backHref={listHref}
        breadcrumb={[
          { label: "XML API" },
          { label: "XRate XML Upload", href: listHref },
          { label: "Create new" },
        ]}
        titleIcon={<TrendingUp className="size-5 text-primary" />}
        title="Create new XRate XML upload"
        description="Select a bank and upload exchange-rate XML files (.xml, up to 100 files, 2MB each)."
      />

      <FormPanel title="Upload details">
        <div className="space-y-6">
          <Field data-invalid={!!errors.bankName} className="max-w-md gap-1.5">
            <FieldLabel className="text-sm font-medium">
              Bank name <span className="text-destructive">*</span>
            </FieldLabel>
            <Controller
              name="bankName"
              control={control}
              render={({ field }) => (
                <SettingsSelect
                  value={field.value}
                  onValueChange={field.onChange}
                  options={XML_API_BANK_NAME_OPTIONS}
                  placeholder="Please select"
                />
              )}
            />
            <FieldError
              errors={
                errors.bankName?.message
                  ? [{ message: String(errors.bankName.message) }]
                  : undefined
              }
            />
          </Field>

          <Field
            data-invalid={!!errors.fileName || !!errors.fileCount || !!fileError}
            className="gap-1.5"
          >
            <XmlFileDropzone
              onFilesChosen={applyFiles}
              onFilesSelected={() => {}}
            />
            {fileNames.length > 0 ? (
              <ul className="text-sm text-muted-foreground">
                {fileNames.map((n) => (
                  <li key={n}>{n}</li>
                ))}
              </ul>
            ) : null}
            <p className="text-xs text-muted-foreground">
              XML only · max {XML_UPLOAD_MAX_FILES} files · {XML_UPLOAD_MAX_FILE_SIZE_MB}MB
              per file
            </p>
            <FieldError
              errors={
                fileError || errors.fileName?.message || errors.fileCount?.message
                  ? [
                      {
                        message: String(
                          fileError ??
                            errors.fileName?.message ??
                            errors.fileCount?.message
                        ),
                      },
                    ]
                  : undefined
              }
            />
          </Field>
        </div>
      </FormPanel>

      <FormSaveBar
        cancelHref={listHref}
        isSaving={isSubmitting}
        saveLabel="Save changes"
        onReset={() => {
          form.reset({ bankName: "please-select", fileName: "", fileCount: 0 })
          setFileNames([])
          setFileError(null)
        }}
      />
    </form>
  )
}