"use client"
import { confirm } from '@/shared/components/confirm-dialog';
import { api } from '@garage/api';
import { useRouter } from 'next/dist/client/components/navigation';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/shared/components/ui/dropdown-menu'
import { Button } from '@/shared/components/ui/button'
import { toast } from 'sonner'
import { Ellipsis, Pencil, Printer, Trash2 } from 'lucide-react';
import { useDocumentPrint } from '@/shared/hooks/use-document-print';

export default function JobCardDropdown({ id }: { id: string }) {
    const router = useRouter();
    const { print, isPrinting } = useDocumentPrint()

    const handleEdit = () => {
        router.push(`/sales/job-cards/${id}/edit`)
    }

    const handlePrint = () => {
        print("job_card", id, "print")
    }

    const handleDelete = async () => {
        const confirmed = await confirm({
            title: "Delete Job Card",
            description: "Are you sure you want to delete this job card? This action cannot be undone.",
            confirmLabel: "Delete",
            variant: "destructive",
        })
        if (confirmed) {
            const promise = api.jobCards.destroy(id)
            toast.promise(promise, {
                loading: "Deleting job card...",
                success: "Job card deleted successfully",
                error: "Failed to delete job card",
            })
            await promise
            router.push("/sales/job-cards")
        }
    }
    return (


        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon" className="self-stretch h-auto aspect-square">
                    <Ellipsis className="size-4" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={handleEdit}>
                    <Pencil className="size-4" />
                    Edit
                </DropdownMenuItem>
                <DropdownMenuItem onClick={handlePrint} disabled={isPrinting}>
                    <Printer className="size-4" />
                    {isPrinting ? "Printing..." : "Print"}
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
                    <Trash2 className="size-4" />
                    Delete
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}