import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
import { ExpenseGeneralInfo } from '@/modules/expenses/expense-general-info'
import { ExpenseItemsSection } from '@/modules/expenses/expense-items-section'
import { ExpensePaymentsSection } from '@/modules/expenses/expense-payments-section'
import { getServerApi } from '@garage/api/server'

export default async function ExpenseDetailPage(props: { params: Promise<{ id: string }> }) {
    const { id } = await props.params
    const api = await getServerApi()
    const expense = await api.expenses.show(id)
    const data = (expense as any)?.data ?? expense

    if (!data) {
        return <div className="text-muted-foreground">Expense not found.</div>
    }

    const taxLabel = data.tax?.title ? `${data.tax.title} (${data.tax.rate}%)` : undefined

    return (
        <DashboardPage header={null}>
            <div className="grid gap-6">
                <ExpenseGeneralInfo />
                <ExpensePaymentsSection />
                <ExpenseItemsSection
                    items={data.expense_items}
                    discountType={data.discount}
                    subTotal={data.sub_total}
                    discountAmount={data.discount_amount_major}
                    taxAmount={data.tax_amount}
                    total={data.total}
                    taxLabel={taxLabel}
                />
            </div>
        </DashboardPage>
    )
}