"use client"

import { use } from "react"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { VehicleForm } from "@/modules/vehicles/vehicle-form"
import { VEHICLE_ROUTES } from "@garage/api"
import type { VehiclesClient } from "@garage/api"
import { CarIcon } from "lucide-react"
import { useCustomer } from "@/modules/customers/customer-context"

export default function CustomerVehiclesPage({ params }: { params: Promise<{ id: string }> }) {
    const { id: customerId } = use(params)
    const customer = useCustomer()

    return (
        <ResourcePage<VehiclesClient>
            toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
                <FormDialog title="Vehicle">
                    {(resourceId) => (
                        <VehicleForm
                            resourceId={resourceId}
                            initialData={selectedItem}
                            onSuccess={() => {
                                closeDialog()
                                invalidateQuery()
                            }}
                        />
                    )}
                </FormDialog>
            )}
            pageTitle="Customer Vehicles"
            routeKey={VEHICLE_ROUTES.INDEX}
            getClient={(api) => api.vehicles}
            extraParams={{ customer_id: customerId }}
            header={null}
            columns={({ actionsColumn }) => [
                {
                    accessorKey: "make",
                    header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
                    cell: ({ row }) => {
                        const r = row.original as any
                        const make = r.make ?? ""
                        const model = r.model ?? ""
                        const display = `${make} ${model}`.trim() || "—"
                        return (
                            <div className="flex items-center gap-2">
                                <CarIcon className="size-4 text-muted-foreground" />
                                <span className="font-medium">{display}</span>
                            </div>
                        )
                    },
                },
                {
                    accessorKey: "year",
                    header: ({ column }) => <ColumnHeader column={column} title="Year" />,
                    cell: ({ row }) => (row.original as any).year ?? "—",
                },
                {
                    accessorKey: "license_plate",
                    header: ({ column }) => <ColumnHeader column={column} title="License Plate" />,
                    cell: ({ row }) => {
                        const val = (row.original as any).license_plate
                        return val ? <span className="font-mono text-xs">{val}</span> : "—"
                    },
                },
                actionsColumn(),
            ]}
        />
    )
}