"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 { expenseItemColumns } from "./expense-items-columns"
import { EXPENSE_ITEM_ROUTES } from "@garage/api"
import type { ExpenseItemsClient } from "@garage/api"

type ExpenseLineItem = {
    expense_id: number
    title: string
    quantity: number
    rate: number
    chart_of_account?: string
    discount_amount?: number
    description?: string
}

type ExpenseItemsFieldConstraint = ExpenseLineItem[] | undefined

export type ExpenseItemsSelectorFieldProps<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
> = {
    name: TName & (TValues[TName] extends ExpenseItemsFieldConstraint ? TName : never)
    label?: string
    triggerLabel?: string
    showChartOfAccount?: boolean
    showDiscount?: boolean
}

export function ExpenseItemsSelectorField<
    TValues extends FieldValues,
    TName extends FieldPath<TValues>,
>({
    name,
    label = "Expense Items",
    triggerLabel = "Add Expense Items",
    showChartOfAccount = false,
    showDiscount = false,
}: ExpenseItemsSelectorFieldProps<TValues, TName>) {
    return (
        <RhfResourceField<TValues, TName, ExpenseItemsClient>
            name={name}
            label={label}
            triggerLabel={triggerLabel}
            itemKey="expense_id"
            dialogProps={{
                title: "Select Expense Items",
                crudProps: {
                    routeKey: EXPENSE_ITEM_ROUTES.INDEX,
                    getClient: (api) => api.expenseItems,
                    columns: [
                        expenseItemColumns.name,
                        expenseItemColumns.purchasePrice,
                        expenseItemColumns.chartOfAccount,
                    ],
                },
            }}
            mapSelected={(row) => {
                const r = row as any
                return {
                    expense_id: r.id,
                    title: r.item_name || "",
                    quantity: 1,
                    rate: Number(r.purchase_price) || 0,
                    chart_of_account: r.purchase_chart_of_account ? String(r.purchase_chart_of_account) : "",
                    description: "",
                } as any
            }}
            renderItems={(items, { remove, update }) => (
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Expense Item</TableHead>
                            <TableHead className="w-24">Qty</TableHead>
                            <TableHead className="w-28">Rate</TableHead>
                            {showChartOfAccount && <TableHead className="w-36">Chart of Account</TableHead>}
                            {showDiscount && <TableHead className="w-28">Discount</TableHead>}
                            <TableHead>Description</TableHead>
                            <TableHead className="w-12" />
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {((items as ExpenseLineItem[] | undefined) ?? []).map((item, index) => (
                            <TableRow key={item.expense_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>
                                {showChartOfAccount && (
                                    <TableCell>
                                        <Input
                                            value={item.chart_of_account ?? ""}
                                            onChange={(e) =>
                                                update(index, { ...item, chart_of_account: e.target.value } as any)
                                            }
                                            placeholder="Optional"
                                            className="h-8 w-32"
                                        />
                                    </TableCell>
                                )}
                                {showDiscount && (
                                    <TableCell>
                                        <Input
                                            type="number"
                                            min={0}
                                            step={0.01}
                                            value={item.discount_amount ?? 0}
                                            onChange={(e) =>
                                                update(index, { ...item, discount_amount: 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>
            )}
        />
    )
}