"use client"

import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { Camera, ScanLine } 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 { Button } from "@/components/ui/button"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { fetchBankApis } from "@/components/xml-apis/bank-api/api/bank-api.api"
import { generatePosOcrXml } from "@/components/xml-apis/upload-xml/api/upload-xml.api"
import {
  uploadXmlPosOcrSchema,
  type UploadXmlPosOcrFormValues,
} from "@/components/xml-apis/upload-xml/create/schema"
import type { SettingsSelectOption } from "@/components/settings/types"
import { SettingsSelect } from "@/components/settings/ui/settings-select"
import { cn } from "@/lib/utils"

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

export function UploadXmlPosOcrForm() {
  const router = useRouter()
  const [fileName, setFileName] = React.useState("")
  const [selectedFile, setSelectedFile] = React.useState<File | null>(null)
  const inputRef = React.useRef<HTMLInputElement>(null)
  const [bankApiOptions, setBankApiOptions] = React.useState<SettingsSelectOption[]>([
    { value: "please-select", label: "Please Select" },
  ])

  React.useEffect(() => {
    void fetchBankApis()
      .then((result) => {
        setBankApiOptions([
          { value: "please-select", label: "Please Select" },
          ...result.items.map((bankApi) => ({
            value: bankApi.id,
            label: bankApi.corporateAccount
              ? `${bankApi.bankName} (${bankApi.corporateAccount})`
              : bankApi.bankName,
          })),
        ])
      })
      .catch(() => {
        toast.error("Failed to load bank APIs")
      })
  }, [])

  const form = useForm<UploadXmlPosOcrFormValues>({
    resolver: zodResolver(uploadXmlPosOcrSchema),
    defaultValues: { bankApiId: "please-select", image: "1", fileName: "" },
  })

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

  const onSubmit = handleSubmit(async (values) => {
    try {
      if (!selectedFile) {
        toast.error("Select a POS file")
        return
      }
      await generatePosOcrXml(values.bankApiId, selectedFile)
      toast.success("XML generated from POS file")
      router.push(listHref)
    } catch {
      toast.error("Failed to generate XML")
    }
  })

  return (
    <form onSubmit={(e) => void onSubmit(e)} className="pb-4">
      <FormPageHeader
        backHref={listHref}
        breadcrumb={[
          { label: "XML API" },
          { label: "Upload XML", href: listHref },
          { label: "POS OCR upload" },
        ]}
        titleIcon={<ScanLine className="size-5 text-primary" />}
        title="POS OCR upload"
        description="Generate XML from a POS statement image or PDF via OCR."
      />

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

          <div
            className={cn(
              "flex min-h-[220px] flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/30 bg-muted/20 px-6 py-10",
            )}
          >
            <p className="text-sm text-muted-foreground">Drop files here or</p>
            <input
              ref={inputRef}
              type="file"
              accept="image/*,.pdf"
              className="sr-only"
              onChange={(e) => {
                const file = e.target.files?.[0] ?? null
                const name = file?.name ?? ""
                setFileName(name)
                setSelectedFile(file)
                setValue("fileName", name, { shouldValidate: true })
              }}
            />
            <Button
              type="button"
              className="h-auto flex-col gap-2 px-6 py-4"
              onClick={() => inputRef.current?.click()}
            >
              <Camera className="size-8" />
              Browse POS file
            </Button>
            {fileName ? (
              <p className="text-sm text-muted-foreground">{fileName}</p>
            ) : null}
          </div>
          <FieldError
            errors={
              errors.fileName?.message
                ? [{ message: String(errors.fileName.message) }]
                : undefined
            }
          />
        </div>
      </FormPanel>

      <FormSaveBar
        cancelHref={listHref}
        isSaving={isSubmitting}
        saveLabel="Generate XML"
        onReset={() => {
          form.reset({ bankApiId: "please-select", image: "1", fileName: "" })
          setFileName("")
          setSelectedFile(null)
          if (inputRef.current) inputRef.current.value = ""
        }}
      />
    </form>
  )
}