"use client"

import { Briefcase } 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 BillService = {
    id: number
    bill_id: number
    service_id: number
    quantity: string | number
    rate: string | number
    description?: string
    service?: { id?: number; name?: string; price?: string }
}

type BillServicesSectionProps = {
    services?: BillService[]
}

export function BillServicesSection({ services = [] }: BillServicesSectionProps) {
    if (!services || services.length === 0) return null

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

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <Briefcase className="size-4" />
                    Services
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div className="overflow-x-auto">
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Service</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>
                            {services.map((service) => {
                                const qty = parseFloat(String(service.quantity))
                                const rate = parseFloat(String(service.rate))
                                const amount = qty * rate
                                return (
                                    <TableRow key={service.id}>
                                        <TableCell className="font-medium">
                                            {service.service?.name || `Service #${service.service_id}`}
                                        </TableCell>
                                        <TableCell className="max-w-xs truncate text-muted-foreground">
                                            {service.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>
    )
}