"use client"

import type { FieldValues, FieldPath } from "react-hook-form"
import { Trash2 } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import {
    Table,
    TableHeader,
    TableBody,
    TableHead,
    TableRow,
    TableCell,
} from "@/shared/components/ui/table"
import { RhfResourceField } from "@/shared/components/resource-selector"
import { serviceColumns } from "./services-columns"
import { SERVICE_ROUTES } from "@garage/api"
import type { ServicesClient } from "@garage/api"

type ServiceLineItem = {
    service_id: number
    title: string
    quantity: number
    rate: number
    description?: string
}

type ServiceItemsFieldConstraint = ServiceLineItem[] | undefined

export type ServicesSelectorFieldProps<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
> = {
    name: TName & (TValues[TName] extends ServiceItemsFieldConstraint ? TName : never)
    label?: string
    triggerLabel?: string
}

export function ServicesSelectorField<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
>({
    name,
    label = "Services",
    triggerLabel = "Add Services",
}: ServicesSelectorFieldProps<TValues, TName>) {
    return (
        <RhfResourceField<TValues, TName, ServicesClient>
            name={name}
            label={label}
            triggerLabel={triggerLabel}
            itemKey="service_id"
            dialogProps={{
                title: "Select Services",
                crudProps: {
                    routeKey: SERVICE_ROUTES.INDEX,
                    getClient: (api) => api.services,
                    columns: [
                        serviceColumns.name,
                        serviceColumns.description,
                        serviceColumns.sellingPrice,
                    ],
                },
            }}
            mapSelected={(row) => {
                const r = row as any
                return {
                    service_id: r.id,
                    title: r.labor_name || r.name || "",
                    quantity: 1,
                    rate: Number(r.selling_price) || 0,
                    description: "",
                } as any
            }}
            renderItems={(items, { remove, update }) => (
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Service</TableHead>
                            <TableHead className="w-24">Qty</TableHead>
                            <TableHead className="w-28">Rate</TableHead>
                            <TableHead>Description</TableHead>
                            <TableHead className="w-12" />
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {((items as ServiceLineItem[] | undefined) ?? []).map((item, index) => (
                            <TableRow key={item.service_id}>
                                <TableCell className="font-medium">{item.title}</TableCell>
                                <TableCell>
                                    <Input
                                        type="number"
                                        min={1}
                                        value={item.quantity}
                                        onChange={(e) =>
                                            update(index, { ...item, quantity: Number(e.target.value) || 1 } as any)
                                        }
                                        className="h-8 w-20"
                                    />
                                </TableCell>
                                <TableCell>
                                    <Input
                                        type="number"
                                        min={0}
                                        step={0.01}
                                        value={item.rate}
                                        onChange={(e) =>
                                            update(index, { ...item, rate: Number(e.target.value) || 0 } as any)
                                        }
                                        className="h-8 w-24"
                                    />
                                </TableCell>
                                <TableCell>
                                    <Input
                                        value={item.description ?? ""}
                                        onChange={(e) =>
                                            update(index, { ...item, description: e.target.value } as any)
                                        }
                                        placeholder="Optional description"
                                        className="h-8"
                                    />
                                </TableCell>
                                <TableCell>
                                    <Button
                                        type="button"
                                        variant="ghost"
                                        size="icon-sm"
                                        onClick={() => remove(index)}
                                    >
                                        <Trash2 className="h-4 w-4 text-destructive" />
                                    </Button>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            )}
        />
    )
}
