"use client"

import { Receipt } 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 BillExpense = {
    id: number
    bill_id: number
    expense_id: number
    quantity: string | number
    rate: string | number
    description?: string
    expense?: { id?: number; title?: string; invoice_number?: string }
}

type BillExpensesSectionProps = {
    expenses?: BillExpense[]
}

export function BillExpensesSection({ expenses = [] }: BillExpensesSectionProps) {
    if (!expenses || expenses.length === 0) return null

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

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