"use client"

import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"

const schema = z.object({
    attachments: z.instanceof(FileList).refine((files) => files.length > 0, "At least one file is required"),
})

type FormValues = z.infer<typeof schema>

type CreditNoteDocumentFormProps = {
    creditNoteId: string
    onSuccess?: () => void
}

export function CreditNoteDocumentForm({ creditNoteId, onSuccess }: CreditNoteDocumentFormProps) {
    const api = useAuthApi()

    const form = useForm<FormValues>({
        resolver: zodResolver(schema),
    })

    const handleSubmit = async (values: FormValues) => {
        try {
            const formData = new FormData()
            Array.from(values.attachments).forEach((file) => {
                formData.append("attachments[]", file)
            })
            await api.creditNotes.addAttachment(creditNoteId, formData)
            toast.success("Attachment uploaded")
            form.reset()
            onSuccess?.()
        } catch {
            toast.error("Failed to upload attachment")
        }
    }

    return (
        <Rhform form={form} onSubmit={handleSubmit}>
            <FieldGroup>
                <div className="flex flex-col gap-1.5">
                    <label className="text-sm font-medium">Attachments</label>
                    <input
                        type="file"
                        multiple
                        className="text-sm"
                        {...form.register("attachments")}
                    />
                    {form.formState.errors.attachments && (
                        <p className="text-xs text-destructive">
                            {form.formState.errors.attachments.message as string}
                        </p>
                    )}
                </div>
                <Button type="submit" disabled={form.formState.isSubmitting}>
                    <Plus />
                    {form.formState.isSubmitting ? "Uploading..." : "Upload Attachment"}
                </Button>
            </FieldGroup>
        </Rhform>
    )
}