"use client"

import { use, useState } from "react"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { ColumnHeader, DataTable } from "@/shared/data-view/table-view"
import { Button } from "@/shared/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/shared/components/ui/dialog"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { confirm } from "@/shared/components/confirm-dialog"
import { toast } from "sonner"
import { Ellipsis, Plus } from "lucide-react"
import type { ColumnDef } from "@tanstack/react-table"
import { JobCardPartForm } from "@/modules/job-cards/job-card-part-form"
import { formatDate } from "@/shared/utils/formatters"

export default function JobCardPartsPage({
    params,
}: {
    params: Promise<{ id: string }>
}) {
    const { id: jobCardId } = use(params)
    const api = useAuthApi()
    const queryClient = useQueryClient()
    const queryKey = ["job-card-parts", jobCardId]

    const [dialogOpen, setDialogOpen] = useState(false)
    const [editItem, setEditItem] = useState<any | null>(null)

    const { data, isLoading } = useQuery({
        queryKey,
        queryFn: () => api.jobCards.getParts(jobCardId),
    })

    const rows = (data as any)?.data ?? []

    const invalidate = () => queryClient.invalidateQueries({ queryKey })

    async function handleDelete(row: any) {
        const confirmed = await confirm({
            title: "Delete this part?",
            description: `Remove part "${row.part?.title ?? "this part"}" from the job card?`,
        })
        if (!confirmed) return
        const promise = api.jobCards.deletePart(jobCardId, row.id)
        toast.promise(promise, {
            loading: "Deleting...",
            success: "Part deleted",
            error: "Failed to delete part",
        })
        await promise
        invalidate()
    }

    const columns: ColumnDef<any>[] = [
        {
            accessorKey: "part.title",
            header: ({ column }) => <ColumnHeader column={column} title="Part" />,
            cell: ({ row }) => {
                const part = row.original.part
                return part ? (
                    <div>
                        <span className="font-medium">{part.title}</span>
                        {part.sku && (
                            <span className="ml-2 text-xs text-muted-foreground">{part.sku}</span>
                        )}
                    </div>
                ) : "—"
            },
        },
        {
            accessorKey: "quantity",
            header: ({ column }) => <ColumnHeader column={column} title="Qty" />,
            cell: ({ row }) => row.original.quantity ?? "—",
        },
        {
            accessorKey: "rate",
            header: ({ column }) => <ColumnHeader column={column} title="Rate" />,
            cell: ({ row }) => {
                const val = row.original.rate
                return val != null ? `$${Number(val).toFixed(2)}` : "—"
            },
        },
        {
            accessorKey: "tax",
            header: ({ column }) => <ColumnHeader column={column} title="Tax" />,
            cell: ({ row }) => row.original.tax || "—",
        },
        {
            accessorKey: "department.name",
            header: ({ column }) => <ColumnHeader column={column} title="Department" />,
            cell: ({ row }) => row.original.department?.name || "—",
        },
        {
            accessorKey: "description",
            header: ({ column }) => <ColumnHeader column={column} title="Description" />,
            cell: ({ row }) => row.original.description || "—",
        },
        {
            accessorKey: "created_at",
            header: ({ column }) => <ColumnHeader column={column} title="Added" />,
            cell: ({ row }) => formatDate(row.original.created_at),
        },
        {
            id: "actions",
            cell: ({ row }) => (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <Ellipsis className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuItem
                            onClick={() => {
                                setEditItem(row.original)
                                setDialogOpen(true)
                            }}
                        >
                            Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem
                            className="text-destructive"
                            onClick={() => handleDelete(row.original)}
                        >
                            Delete
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            ),
        },
    ]

    return (
        <div className="flex flex-col gap-4 p-4">
            <div className="flex justify-end">
                <Dialog
                    open={dialogOpen}
                    onOpenChange={(open) => {
                        setDialogOpen(open)
                        if (!open) setEditItem(null)
                    }}
                >
                    <DialogTrigger asChild>
                        <Button onClick={() => setEditItem(null)}>
                            <Plus className="me-2 h-4 w-4" />
                            Add Part
                        </Button>
                    </DialogTrigger>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>{editItem ? "Edit Part" : "Add Part"}</DialogTitle>
                        </DialogHeader>
                        <JobCardPartForm
                            jobCardId={jobCardId}
                            jobCardPartId={editItem?.id ?? null}
                            initialData={editItem}
                            onSuccess={() => {
                                setDialogOpen(false)
                                setEditItem(null)
                                invalidate()
                            }}
                            onCancel={() => {
                                setDialogOpen(false)
                                setEditItem(null)
                            }}
                        />
                    </DialogContent>
                </Dialog>
            </div>

            <DataTable
                columns={columns}
                data={rows}
                pagination={{
                    page: 1,
                    pageSize: rows.length || 15,
                    pageCount: 1,
                    total: rows.length,
                }}
                isLoading={isLoading}
            />
        </div>
    )
}