"use client"

import { toastApiError } from "@/lib/toast-api-error";
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { Upload } from "lucide-react"
import * as React from "react"
import { 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 { submitBankApiQuickAction } from "@/components/xml-apis/bank-api/api/bank-api.api"
import type { BankApiQuickActionFileUploadDefinition } from "@/components/xml-apis/bank-api/data/bank-api-quick-actions"
import {
  bankApiQuickActionUploadSchema,
  type BankApiQuickActionUploadValues,
} from "@/components/xml-apis/bank-api/quick-action/schema"
import { validateQuickActionFiles } from "@/components/xml-apis/bank-api/quick-action/validate-quick-action-files"
import { XmlFileDropzone } from "@/components/xml-apis/shared/xml-file-dropzone"
import {
  XML_UPLOAD_MAX_FILES,
  XML_UPLOAD_MAX_FILE_SIZE_MB,
} from "@/components/xml-apis/shared/xml-upload-validation"

const listHref = "/dashboard/xml-apis/bank-api"

type BankApiQuickActionUploadFormProps = {
  bankId: string
  bankName: string
  action: BankApiQuickActionFileUploadDefinition
}

export function BankApiQuickActionUploadForm({
  bankId,
  bankName,
  action,
}: BankApiQuickActionUploadFormProps) {
  const router = useRouter()
  const [files, setFiles] = React.useState<File[]>([])
  const [fileNames, setFileNames] = React.useState<string[]>([])
  const [fileError, setFileError] = React.useState<string | null>(null)

  const form = useForm<BankApiQuickActionUploadValues>({
    resolver: zodResolver(bankApiQuickActionUploadSchema),
    defaultValues: {
      bankId,
      bankName,
      actionId: action.id,
      fileCount: 0,
    },
    mode: "onBlur",
  })

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

  const applyFiles = (nextFiles: File[]) => {
    const validationError = validateQuickActionFiles(nextFiles, action)
    if (validationError) {
      setFileError(validationError)
      setFiles([])
      setFileNames([])
      setValue("fileCount", 0, { shouldValidate: true })
      return
    }

    setFileError(null)
    setFiles(nextFiles)
    setFileNames(nextFiles.map((file) => file.name))
    setValue("fileCount", nextFiles.length, { shouldValidate: true })
  }

  const onSubmit = handleSubmit(async () => {
    if (!files.length) {
      setFileError("Upload at least one file")
      return
    }

    try {
      await submitBankApiQuickAction({
        bankId,
        bankName,
        action,
        files,
      })
      toast.success(`${action.label} completed`)
      router.push(listHref)
    } catch (error) {
      toastApiError(error, "Failed to upload files")
    }
  })

  return (
    <form onSubmit={(e) => void onSubmit(e)} className="pb-4">
      <FormPageHeader
        backHref={listHref}
        breadcrumb={[
          { label: "XML API" },
          { label: "Bank Api", href: listHref },
          { label: action.label },
        ]}
        titleIcon={<Upload className="size-5 text-primary" />}
        title={action.label}
        description={`${bankName} — ${action.description}`}
      />

      <FormPanel title="Upload files">
        <div className="space-y-6">
          <Field className="max-w-md gap-1.5">
            <FieldLabel className="text-sm font-medium">Bank name</FieldLabel>
            <p className="text-sm text-muted-foreground">{bankName}</p>
          </Field>

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

      <FormSaveBar
        cancelHref={listHref}
        isSaving={isSubmitting}
        saveLabel={action.submitLabel ?? "Upload files"}
        onReset={() => {
          form.reset({
            bankId,
            bankName,
            actionId: action.id,
            fileCount: 0,
          })
          setFiles([])
          setFileNames([])
          setFileError(null)
        }}
      />
    </form>
  )
}