"use client"

import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Power, Trash2 } from "lucide-react"
import { confirm } from "@/shared/components/confirm-dialog"
import { toast } from "sonner"
import { useFormDialog } from "@/shared/components/form-dialog"
import { VendorForm } from "./vendor-form"

type VendorActionsProps = {
    vendorId: string
    isActive?: boolean
}

export function VendorActions({ vendorId, isActive }: VendorActionsProps) {
    const api = useAuthApi()
    const router = useRouter()
    const editDialog = useFormDialog("vendor-details-edit")

    const handleDelete = async () => {
        const confirmed = await confirm({
            title: "Delete Vendor",
            description: "Are you sure you want to delete this vendor? This action cannot be undone.",
            confirmLabel: "Delete",
            variant: "destructive",
        })
        if (!confirmed) return

        try {
            await api.vendors.destroy(vendorId)
            toast.success("Vendor deleted successfully.")
            router.push("/purchase/vendor")
        } catch {
            toast.error("Failed to delete vendor.")
        }
    }

    const handleToggleStatus = async () => {
        try {
            await api.vendors.toggleStatus({ id: Number(vendorId) } as any)
            toast.success(isActive ? "Vendor deactivated." : "Vendor activated.")
            router.refresh()
        } catch {
            toast.error("Failed to update vendor status.")
        }
    }

    return (
        <>
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                        <Ellipsis className="size-4" />
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => editDialog.open(vendorId)}>
                        <Pencil className="size-4" />
                        Edit
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={handleToggleStatus}>
                        <Power className="size-4" />
                        {isActive ? "Deactivate" : "Activate"}
                    </DropdownMenuItem>
                    <DropdownMenuItem variant="destructive" onClick={handleDelete}>
                        <Trash2 className="size-4" />
                        Delete
                    </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>

            <Dialog open={editDialog.isOpen} onOpenChange={(v) => { if (!v) editDialog.close() }}>
                <DialogContent className="min-w-xl lg:min-w-2xl">
                    <DialogHeader>
                        <DialogTitle className="text-2xl font-bold">Edit Vendor</DialogTitle>
                    </DialogHeader>
                    <ScrollArea className="max-h-[80vh] px-4">
                        <VendorForm
                            resourceId={editDialog.resourceId}
                            onSuccess={() => {
                                editDialog.close()
                                router.refresh()
                            }}
                        />
                    </ScrollArea>
                </DialogContent>
            </Dialog>
        </>
    )
}