garage-erp/apps/dashboard/modules/job-cards/job-card-check-in-dialog.tsx

"use client"

import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import {
    Rhform,
    RhfTextField,
    RhfSelectField,
    RhfDateField,
    RhfTimeField,
    RhfAsyncSelectField,
} from "@/shared/components/form"
import { FieldGroup } from "@/shared/components/ui/field"
import { Button } from "@/shared/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/shared/components/ui/dialog"
import { DEPARTMENT_ROUTES } from "@garage/api"
import { FUEL_LEVEL_OPTIONS } from "./job-card.schema"
import { toId } from "@/shared/lib/utils"

// ── Schema ──

const checkInSchema = z.object({
    check_in_date: z.string().optional(),
    check_in_time: z.string().optional(),
    km_in: z.string().optional(),
    fuel_level: z.string().optional(),
    start_date: z.string().optional(),
    start_time: z.string().optional(),
    department: z.object({ value: z.any(), label: z.string() }).nullable().optional(),
    delivery_date: z.string().optional(),
    delivery_time: z.string().optional(),
})

type CheckInFormValues = z.infer<typeof checkInSchema>

const mapLookupOption = (item: any) => ({
    value: String(item.id),
    label: item.name,
})

const STORE_OBJECT = { storeObject: true } as const

// ── Props ──

type JobCardCheckInDialogProps = {
    jobCardId: string
    open: boolean
    onOpenChange: (open: boolean) => void
    onSuccess?: () => void
}

// ── Component ──

export function JobCardCheckInDialog({
    jobCardId,
    open,
    onOpenChange,
    onSuccess,
}: JobCardCheckInDialogProps) {
    const api = useAuthApi()

    const now = new Date()
    const todayStr = now.toISOString().split("T")[0]
    const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(2, "0")}`

    const form = useForm<CheckInFormValues>({
        resolver: zodResolver(checkInSchema),
        defaultValues: {
            check_in_date: todayStr,
            check_in_time: currentTime,
            km_in: "",
            fuel_level: "",
            start_date: "",
            start_time: "",
            department: null,
            delivery_date: "",
            delivery_time: "",
        },
    })

    const handleSubmit = async (values: CheckInFormValues) => {
        try {
            await api.jobCards.checkIn(jobCardId, {
                check_in_date: values.check_in_date || undefined,
                check_in_time: values.check_in_time || undefined,
                km_in: values.km_in ? Number(values.km_in) : undefined,
                fuel_level: values.fuel_level || undefined,
                start_date: values.start_date || undefined,
                start_time: values.start_time || undefined,
                department_id: values.department ? Number(toId(values.department)) : undefined,
                delivery_date: values.delivery_date || undefined,
                delivery_time: values.delivery_time || undefined,
            })
            toast.success("Job card checked in successfully")
            form.reset()
            onSuccess?.()
        } catch {
            toast.error("Failed to check in job card")
        }
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="min-w-xl">
                <DialogHeader>
                    <DialogTitle className="text-2xl font-bold">Check In</DialogTitle>
                </DialogHeader>
                <Rhform form={form} onSubmit={handleSubmit}>
                    <FieldGroup>
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <RhfDateField name="check_in_date" label="Check-in Date" />
                            <RhfTimeField name="check_in_time" label="Check-in Time" />
                        </div>
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <RhfTextField name="km_in" label="KM In" type="number" placeholder="e.g. 50321" />
                            <RhfSelectField name="fuel_level" label="Fuel Level" options={FUEL_LEVEL_OPTIONS} />
                        </div>
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <RhfDateField name="start_date" label="Start Date" />
                            <RhfTimeField name="start_time" label="Start Time" />
                        </div>
                        <RhfAsyncSelectField
                            name="department"
                            label="Department"
                            placeholder="Select department"
                            queryKey={[DEPARTMENT_ROUTES.INDEX]}
                            listFn={() => api.departments.list()}
                            mapOption={(op:any)=> ({value: op.id, label: op.name})}
                            {...STORE_OBJECT}
                            getOptionLabel={op=>op.label}
                            getOptionValue={op=>op}
                            
                        />
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <RhfDateField name="delivery_date" label="Delivery Date" />
                            <RhfTimeField name="delivery_time" label="Delivery Time" />
                        </div>
                        <div className="flex justify-end gap-2">
                            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                                Cancel
                            </Button>
                            <Button type="submit" disabled={form.formState.isSubmitting}>
                                {form.formState.isSubmitting ? "Checking in..." : "Check In"}
                            </Button>
                        </div>
                    </FieldGroup>
                </Rhform>
            </DialogContent>
        </Dialog>
    )
}