"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 InvoiceService = {
    id: number
    invoice_id: number
    service_id: number
    quantity: string | number
    rate: string | number
    description?: string
    chart_of_account?: string
    department_id?: number
    created_at?: string
    updated_at?: string
}

type InvoiceServicesSectionProps = {
    services?: InvoiceService[]
}

export function InvoiceServicesSection({ services = [] }: InvoiceServicesSectionProps) {
    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>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="max-w-xs truncate">
                                            {service.description || `Service #${service.service_id}`}
                                        </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={3} className="text-right">
                                    Subtotal
                                </TableCell>
                                <TableCell className="text-right">
                                    {formatCurrency(subtotal)}
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </div>
            </CardContent>
        </Card>
    )
}