garage-erp/apps/dashboard/modules/payment-mades/payment-made-form.tsx

"use client"

import { AlertTriangle, Plus, Save } from "lucide-react"

import { Button } from "@/shared/components/ui/button"
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
import { FieldGroup } from "@/shared/components/ui/field"
import {
    Rhform,
    RhfTextField,
    RhfSelectField,
    RhfTextareaField,
    RhfAsyncSelectField,
} from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useResourceForm } from "@/shared/hooks/use-resource-form"
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toRelation, toId } from "@/shared/lib/utils"

import {
    paymentMadeFormSchema,
    type PaymentMadeFormValues,
} from "./payment-made.schema"
import {
    PAYMENT_MADE_ROUTES,
    PAYMENT_MODE_ROUTES,
    VENDOR_ROUTES,
    EMPLOYEE_ROUTES,
    PaymentFor,
} from "@garage/api"

// ── Constants ──

const PAYMENT_FOR_OPTIONS = PaymentFor.map((value) => ({
    value,
    label: value.charAt(0).toUpperCase() + value.slice(1),
}))

// ── Props ──

export type PaymentMadeFormProps = {
    resourceId?: string | null
    initialData?: unknown
    onSuccess?: () => void
}

// ── Default values ──

const DEFAULT_VALUES: PaymentMadeFormValues = {
    vendor: null,
    employee: null,
    payment_mode: null,
    payment_for: "",
    payment_made: "",
    payment_number: "",
    payment_reference: "",
    payment_date: "",
    paid_through: "",
    notes: "",
}

// ── Mapping helpers ──

function mapToFormValues(data: unknown): PaymentMadeFormValues {
    const d = (data as any)?.data ?? data ?? {}

    return {
        vendor: toRelation(d.vendor_id, d.vendor_name),
        employee: toRelation(d.employee_id, d.employee_name),
        payment_mode: toRelation(d.payment_mode_id, d.payment_mode_name),
        payment_for: d.payment_for || "",
        payment_made: d.payment_made ? String(d.payment_made) : "",
        payment_number: d.payment_number || "",
        payment_reference: d.payment_reference || "",
        payment_date: d.payment_date || "",
        paid_through: d.paid_through || "",
        notes: d.notes || "",
    }
}

function mapFormToPayload(values: PaymentMadeFormValues) {
    return {
        vendor_id: toId(values.vendor),
        employee_id: toId(values.employee) || undefined,
        payment_mode_id: toId(values.payment_mode),
        payment_for: values.payment_for,
        payment_made: values.payment_made,
        payment_number: values.payment_number || undefined,
        payment_reference: values.payment_reference || undefined,
        payment_date: values.payment_date,
        paid_through: values.paid_through || undefined,
        notes: values.notes || undefined,
    }
}

// ── Shared mapOption for async selects ──

const mapLookupOption = (item: any) => ({
    value: String(item.id),
    label: item.name ?? item.title ?? `#${item.id}`,
})

const mapVendorOption = (item: any) => ({
    value: String(item.id),
    label: item.name ?? item.company_name ?? `#${item.id}`,
})

const mapEmployeeOption = (item: any) => ({
    value: String(item.id),
    label: item.first_name
        ? `${item.first_name} ${item.last_name || ""}`.trim()
        : item.name ?? `#${item.id}`,
})

const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }

// ── Component ──

export function PaymentMadeForm({ resourceId, initialData, onSuccess }: PaymentMadeFormProps) {
    const api = useAuthApi()

    const { form, isEditing } = useResourceForm<PaymentMadeFormValues, any>({
        schema: paymentMadeFormSchema,
        defaultValues: DEFAULT_VALUES,
        resourceId,
        initialData,
        mapToFormValues,
    })

    const { mutate, error, isPending } = useFormMutation(form, {
        mutationFn: (values: PaymentMadeFormValues) => {
            const payload = mapFormToPayload(values)
            const promise = (isEditing && resourceId
                ? api.paymentMades.update(resourceId, payload as any)
                : api.paymentMades.create(payload as any)) as Promise<any>
            toast.promise(promise, {
                loading: isEditing ? "Updating payment..." : "Recording payment...",
                success: isEditing ? "Payment updated successfully" : "Payment recorded successfully",
                error: isEditing ? "Failed to update payment" : "Failed to record payment",
            })
            return promise
        },
        onSuccess: () => {
            form.reset()
            onSuccess?.()
        },
    })

    return (
        <Rhform form={form} onSubmit={(values) => mutate(values)}>
            {error && (
                <Alert variant="destructive" className="mb-4">
                    <AlertTriangle className="me-2 h-4 w-4" />
                    <AlertTitle>
                        {isEditing ? "Failed to update payment" : "Failed to record payment"}
                    </AlertTitle>
                    {error.message}
                </Alert>
            )}

            <FieldGroup>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <RhfAsyncSelectField
                        name="vendor"
                        label="Vendor"
                        placeholder="Select vendor"
                        queryKey={[VENDOR_ROUTES.INDEX]}
                        listFn={() => api.vendors.list()}
                        mapOption={mapVendorOption}
                        {...STORE_OBJECT}
                    />
                    <RhfAsyncSelectField
                        name="employee"
                        label="Employee"
                        placeholder="Select employee"
                        queryKey={[EMPLOYEE_ROUTES.INDEX]}
                        listFn={() => api.employees.list()}
                        mapOption={mapEmployeeOption}
                        {...STORE_OBJECT}
                    />
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <RhfSelectField
                        name="payment_for"
                        label="Payment For"
                        placeholder="Select type"
                        options={PAYMENT_FOR_OPTIONS}
                        required
                    />
                    <RhfTextField
                        name="payment_made"
                        label="Amount"
                        placeholder="0.00"
                        type="number"
                        required
                    />
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <RhfTextField
                        name="payment_number"
                        label="Payment Number"
                        placeholder="PAY-001"
                    />
                    <RhfTextField
                        name="payment_reference"
                        label="Payment Reference"
                        placeholder="Reference"
                    />
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <RhfTextField
                        name="payment_date"
                        label="Payment Date"
                        type="date"
                        required
                    />
                    <RhfAsyncSelectField
                        name="payment_mode"
                        label="Payment Mode"
                        placeholder="Select payment mode"
                        queryKey={[PAYMENT_MODE_ROUTES.INDEX]}
                        listFn={() => api.paymentModes.list()}
                        mapOption={mapLookupOption}
                        {...STORE_OBJECT}
                    />
                </div>

                <RhfTextField
                    name="paid_through"
                    label="Paid Through"
                    placeholder="Account name"
                />

                <RhfTextareaField
                    name="notes"
                    label="Notes"
                    rows={3}
                    placeholder="Add any notes about this payment..."
                />

                <Button type="submit" variant="default" disabled={isPending}>
                    {isEditing ? <Save /> : <Plus />}
                    {isPending
                        ? (isEditing ? "Updating..." : "Recording...")
                        : (isEditing ? "Update Payment" : "Record Payment")}
                </Button>
            </FieldGroup>
        </Rhform>
    )
}