garage-erp/apps/dashboard/modules/job-cards/job-card-actions.tsx

"use client"

import { useState } from "react"
import { useMutation } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
} from "@/shared/components/ui/dialog"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/shared/components/ui/popover"
import { Calendar } from "@/shared/components/ui/calendar"
import { toast } from "sonner"
import { Pencil, CalendarIcon, UserCog, UserCheck, Loader2 } from "lucide-react"
import { format } from "date-fns"
import { EmployeeCombobox } from "@/modules/employees/employee-combobox"

type JobCardActionsProps = {
    jobCardId: string
    orderDate?: string | null
    serviceWriterName?: string | null
    salesPersonName?: string | null
}

// ── Informative Action Card ──

function ActionCard({
    icon: Icon,
    label,
    value,
    isPending,
}: {
    icon: React.ComponentType<{ className?: string }>
    label: string
    value?: string | null
    isPending?: boolean
}) {
    return (
        <div className="group relative flex items-center gap-3 rounded-lg border bg-card px-4 py-3 text-left transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer select-none">
            <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-background">
                <Icon className="size-4" />
            </div>
            <div className="flex flex-col gap-0.5 overflow-hidden">
                <span className="text-[11px] font-medium text-muted-foreground leading-none">{label}</span>
                <span className="text-sm font-semibold leading-tight truncate">
                    {value ?? <span className="font-normal text-muted-foreground italic">Not set</span>}
                </span>
            </div>
            {isPending ? (
                <Loader2 className="ml-2 size-3.5 shrink-0 text-muted-foreground animate-spin" />
            ) : (
                <Pencil className="ml-2 size-3 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-60 transition-opacity" />
            )}
        </div>
    )
}

// ── Employee Picker Dialog ──

type EmployeePickerDialogProps = {
    open: boolean
    onOpenChange: (open: boolean) => void
    title: string
    description: string
    isPending: boolean
    onSelect: (employeeId: number) => void
}

function EmployeePickerDialog({
    open,
    onOpenChange,
    title,
    description,
    isPending,
    onSelect,
}: EmployeePickerDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>{description}</DialogDescription>
                </DialogHeader>
                <EmployeeCombobox
                    value={null}
                    onValueChange={(emp) => {
                        if (emp) onSelect(Number(emp.value))
                    }}
                    disabled={isPending}
                    placeholder="Search employees..."
                    showClear={false}
                />
            </DialogContent>
        </Dialog>
    )
}

// ── Main Component ──

export function JobCardActions({ jobCardId, orderDate, serviceWriterName, salesPersonName }: JobCardActionsProps) {
    const api = useAuthApi()
    const router = useRouter()
    const [datePickerOpen, setDatePickerOpen] = useState(false)
    const [serviceWriterDialogOpen, setServiceWriterDialogOpen] = useState(false)
    const [salesPersonDialogOpen, setSalesPersonDialogOpen] = useState(false)


    const changeDateMutation = useMutation({
        mutationFn: (date: Date) => {
            const order_date = format(date, "yyyy-MM-dd")
            const promise = api.jobCards.changeDate(jobCardId, { order_date })
            toast.promise(promise, {
                loading: "Updating date...",
                success: "Date updated successfully",
                error: "Failed to update date",
            })
            return promise
        },
        onSuccess: () => {
            setDatePickerOpen(false)
            router.refresh()
        },
    })

    const changeServiceWriterMutation = useMutation({
        mutationFn: (employeeId: number) => {
            const promise = api.jobCards.changeServiceWriter(jobCardId, { service_writer_id: employeeId })
            toast.promise(promise, {
                loading: "Updating service writer...",
                success: "Service writer updated successfully",
                error: "Failed to update service writer",
            })
            return promise
        },
        onSuccess: () => {
            setServiceWriterDialogOpen(false)
            router.refresh()
        },
    })

    const changeSalesPersonMutation = useMutation({
        mutationFn: (employeeId: number) => {
            const promise = api.jobCards.changeSalesPerson(jobCardId, { sales_person_id: employeeId })
            toast.promise(promise, {
                loading: "Updating sales person...",
                success: "Sales person updated successfully",
                error: "Failed to update sales person",
            })
            return promise
        },
        onSuccess: () => {
            setSalesPersonDialogOpen(false)
            router.refresh()
        },
    })

    return (
        <div className="flex flex-wrap items-stretch gap-2">
            {/* Check-in Date Action Card */}
            <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
                <PopoverTrigger asChild>
                    <button type="button" className="focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg">
                        <ActionCard
                            icon={CalendarIcon}
                            label="Order Date"
                            value={orderDate ? new Date(orderDate).toLocaleDateString() : null}
                            isPending={changeDateMutation.isPending}
                        />
                    </button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                        mode="single"
                        onSelect={(date) => {
                            if (date) changeDateMutation.mutate(date)
                        }}
                        disabled={changeDateMutation.isPending}
                    />
                </PopoverContent>
            </Popover>

            {/* Service Writer Action Card */}
            <button
                type="button"
                className="focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
                onClick={() => setServiceWriterDialogOpen(true)}
            >
                <ActionCard
                    icon={UserCog}
                    label="Service Writer"
                    value={serviceWriterName ?? null}
                    isPending={changeServiceWriterMutation.isPending}
                />
            </button>

            {/* Sales Person Action Card */}
            <button
                type="button"
                className="focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
                onClick={() => setSalesPersonDialogOpen(true)}
            >
                <ActionCard
                    icon={UserCheck}
                    label="Sales Person"
                    value={salesPersonName ?? null}
                    isPending={changeSalesPersonMutation.isPending}
                />
            </button>

            {/* Edit / Delete Dropdown */}
    

            <EmployeePickerDialog
                open={serviceWriterDialogOpen}
                onOpenChange={setServiceWriterDialogOpen}
                title="Change Service Writer"
                description="Search and select an employee to assign as service writer."
                isPending={changeServiceWriterMutation.isPending}
                onSelect={(id) => changeServiceWriterMutation.mutate(id)}
            />

            <EmployeePickerDialog
                open={salesPersonDialogOpen}
                onOpenChange={setSalesPersonDialogOpen}
                title="Change Sales Person"
                description="Search and select an employee to assign as sales person."
                isPending={changeSalesPersonMutation.isPending}
                onSelect={(id) => changeSalesPersonMutation.mutate(id)}
            />
        </div>
    )
}