garage-erp/apps/dashboard/app/(authenticated)/sales/vehicles/[id]/documents/page.tsx

"use client"

import { useParams } from "next/navigation"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { type ColumnDef } from "@tanstack/react-table"
import { useState } from "react"
import { Download, ExternalLink, Plus, Trash2 } from "lucide-react"
import { toast } from "sonner"

import { useAuthApi } from "@/shared/useApi"
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
import { confirm } from "@/shared/components/confirm-dialog"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent } from "@/shared/components/ui/card"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/shared/components/ui/dialog"
import { VehicleDocumentForm } from "@/modules/vehicles/vehicle-document-form"
import { formatDate, formatDateTime } from "@/shared/utils/formatters"
import { getFullName } from "@/shared/utils/getFullName"

type VehicleDocument = {
    id: number
    document_number?: string
    document_type_id?: number
    document_type?: {
        id?: number
        name?: string
    } | null
    customer_id?: number
    customer?: {
        id?: number
        first_name?: string
        last_name?: string
        name?: string
    } | null
    document_expire?: string
    document_file?: string
    document_file_url?: string | null
    created_at: string
    updated_at: string
}

export default function VehicleDocumentsPage() {
    const { id: vehicleId } = useParams<{ id: string }>()
    const api = useAuthApi()
    const queryClient = useQueryClient()
    const [dialogOpen, setDialogOpen] = useState(false)

    const queryKey = ["vehicle-documents", vehicleId]

    const { data, isLoading } = useQuery({
        queryKey,
        queryFn: () => api.vehicleDocuments.listDocuments({ vehicle_id: vehicleId }),
    })

    const deleteMutation = useMutation({
        mutationFn: (id: number) => api.vehicleDocuments.destroyDocument(String(id)),
        onSuccess: () => {
            toast.success("Document deleted successfully.")
            queryClient.invalidateQueries({ queryKey })
        },
        onError: () => {
            toast.error("Failed to delete document.")
        },
    })

    const handleDelete = async (doc: VehicleDocument) => {
        const confirmed = await confirm({
            title: "Delete Document",
            description: `Are you sure you want to delete "${doc.document_number || `Document #${doc.id}`}"?`,
            confirmLabel: "Delete",
            variant: "destructive",
        })
        if (confirmed) {
            deleteMutation.mutate(doc.id)
        }
    }

    const columns: ColumnDef<VehicleDocument>[] = [
        {
            accessorKey: "document_number",
            header: ({ column }) => <ColumnHeader column={column} title="Document Number" />,
            cell: ({ getValue, row }) => {
                const number = getValue<string>()
                const fallbackName = row.original.document_file?.split("/").pop()
                return number || fallbackName || `Document #${row.original.id}`
            },
        },
        {
            accessorKey: "document_type_id",
            header: ({ column }) => <ColumnHeader column={column} title="Document Type" />,
            cell: ({ row, getValue }) => {
                const typeName = row.original.document_type?.name
                const value = getValue<number | undefined>()
                return typeName || (value ? `#${value}` : "—")
            },
        },
        {
            accessorKey: "customer_id",
            header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
            cell: ({ row, getValue }) => {
                const name = getFullName(row.original.customer as any) || row.original.customer?.name
                const value = getValue<number | undefined>()
                return name || (value ? `#${value}` : "—")
            },
        },
        {
            accessorKey: "document_expire",
            header: ({ column }) => <ColumnHeader column={column} title="Expiry Date" />,
            cell: ({ getValue }) => formatDate(getValue<string | undefined>()),
        },
        {
            id: "file",
            header: ({ column }) => <ColumnHeader column={column} title="File" />,
            cell: ({ row }) => {
                const url = row.original.document_file_url
                if (!url) return "No file"

                return (
                    <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                        <a
                            href={url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-1 text-primary underline"
                            title="Open document"
                        >
                            <ExternalLink className="size-3.5" />
                            Open
                        </a>
                        <a
                            href={url}
                            download
                            className="inline-flex items-center gap-1 text-primary underline"
                            title="Download document"
                        >
                            <Download className="size-3.5" />
                            Download
                        </a>
                    </div>
                )
            },
            enableSorting: false,
        },
        {
            accessorKey: "created_at",
            header: ({ column }) => <ColumnHeader column={column} title="Uploaded At" />,
            cell: ({ getValue }) => formatDateTime(getValue<string | undefined>()),
        },
        {
            id: "actions",
            header: () => <span className="sr-only">Actions</span>,
            cell: ({ row }) => (
                <Button
                    variant="ghost"
                    size="icon-sm"
                    onClick={(e) => {
                        e.stopPropagation()
                        handleDelete(row.original)
                    }}
                    title="Delete document"
                >
                    <Trash2 className="size-4 text-destructive" />
                </Button>
            ),
            enableSorting: false,
        },
    ]

    const handleRowClick = (doc: VehicleDocument) => {
        if (doc.document_file_url) {
            window.open(doc.document_file_url, "_blank", "noopener,noreferrer")
            return
        }

        toast.info("This document has no file to open.")
    }

    const documents = (data as any)?.data ?? []
    const meta = (data as any)?.meta

    const pagination = {
        page: meta?.current_page ?? 1,
        pageSize: meta?.per_page ?? 15,
        pageCount: meta?.last_page ?? 1,
        total: meta?.total ?? 0,
    }

    return (
        <div className="flex flex-col gap-4">


            <Card>
                <CardContent>
                    <DataTable
                        slots={{
                            actions: <div className="flex items-center justify-end">
                                <Button onClick={() => setDialogOpen(true)}>
                                    <Plus className="size-4" />
                                    Upload Document
                                </Button>
                            </div>
                        }}
                        columns={columns}
                        data={documents}
                        pagination={pagination}
                        sorting={[]}
                        onChange={() => { }}
                        onRowClick={handleRowClick}
                        isLoading={isLoading}
                    />
                </CardContent>
            </Card>

            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                <DialogContent className="min-w-xl">
                    <DialogHeader>
                        <DialogTitle>Upload Document</DialogTitle>
                    </DialogHeader>
                    <VehicleDocumentForm
                        vehicleId={vehicleId}
                        onSuccess={() => {
                            queryClient.invalidateQueries({ queryKey })
                            setDialogOpen(false)
                        }}
                    />
                </DialogContent>
            </Dialog>
        </div>
    )
}