"use client"

import { Wrench } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { formatCurrency, formatNumber } from "@/shared/utils/formatters"

type BillPart = {
    id: number
    bill_id: number
    part_id: number
    quantity: string | number
    rate: string | number
    description?: string
    part?: { id?: number; name?: string; part_number?: string }
}

type BillPartsSectionProps = {
    parts?: BillPart[]
}

export function BillPartsSection({ parts = [] }: BillPartsSectionProps) {
    if (!parts || parts.length === 0) return null

    const subtotal = parts.reduce((sum, part) => {
        const qty = parseFloat(String(part.quantity))
        const rate = parseFloat(String(part.rate))
        return sum + (qty * rate)
    }, 0)

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <Wrench className="size-4" />
                    Parts
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div className="overflow-x-auto">
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Part</TableHead>
                                <TableHead>Description</TableHead>
                                <TableHead className="text-right">Quantity</TableHead>
                                <TableHead className="text-right">Rate</TableHead>
                                <TableHead className="text-right">Amount</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {parts.map((part) => {
                                const qty = parseFloat(String(part.quantity))
                                const rate = parseFloat(String(part.rate))
                                const amount = qty * rate
                                return (
                                    <TableRow key={part.id}>
                                        <TableCell className="font-medium">
                                            {part.part?.name || `Part #${part.part_id}`}
                                        </TableCell>
                                        <TableCell className="max-w-xs truncate text-muted-foreground">
                                            {part.description || "—"}
                                        </TableCell>
                                        <TableCell className="text-right">{formatNumber(qty)}</TableCell>
                                        <TableCell className="text-right">{formatCurrency(rate)}</TableCell>
                                        <TableCell className="text-right font-medium">{formatCurrency(amount)}</TableCell>
                                    </TableRow>
                                )
                            })}
                            <TableRow className="bg-muted/50 font-medium">
                                <TableCell colSpan={4} className="text-right">Subtotal</TableCell>
                                <TableCell className="text-right">{formatCurrency(subtotal)}</TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </div>
            </CardContent>
        </Card>
    )
}