"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 { partColumns } from "./parts-columns"
import { PARTS_ROUTES } from "@garage/api"
import type { PartsClient } from "@garage/api"

type PartItem = {
    part_id: number
    title: string
    quantity: number
    rate: number
    description?: string
}

type PartsItemsFieldConstraint = PartItem[] | undefined

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

export function PartsSelectorField<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
>({
    name,
    label = "Parts",
    triggerLabel = "Add Parts",
}: PartsSelectorFieldProps<TValues, TName>) {
    return (
        <RhfResourceField<TValues, TName, PartsClient>
            name={name}
            label={label}
            triggerLabel={triggerLabel}
            itemKey="part_id"
            dialogProps={{
                title: "Select Parts",
                crudProps: {
                    routeKey: PARTS_ROUTES.INDEX,
                    getClient: (api) => api.parts,
                    columns: [
                        partColumns.title,
                        partColumns.partNumber,
                        partColumns.manufacturer,
                        partColumns.purchasePrice,
                        partColumns.stock,
                    ],
                },
            }}
            mapSelected={(row) => {
                const r = row as any
                return {
                    part_id: r.id,
                    title: r.title || "",
                    quantity: 1,
                    rate: Number(r.purchase_price) || 0,
                    description: "",
                } as any
            }}
            renderItems={(items, { remove, update }) => (
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Part</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 PartItem[] | undefined) ?? []).map((item, index) => (
                            <TableRow key={item.part_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>
            )}
        />
    )
}