import { getServerApi } from '@garage/api/server'
import { InvoiceGeneralInfo } from '@/modules/invoices/invoice-general-info'
import { InvoicePartsSection } from '@/modules/invoices/invoice-parts-section'
import { InvoiceServicesSection } from '@/modules/invoices/invoice-services-section'
import { InvoiceExpensesSection } from '@/modules/invoices/invoice-expenses-section'
import { InvoiceTotalsSummary } from '@/modules/invoices/invoice-totals-summary'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
import InvoicePaymentsSection from '@/modules/invoices/invoice-payments-section'


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

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

    return (
        <DashboardPage header={null}>
            <div className="grid gap-6">
                <InvoiceGeneralInfo />
                <InvoicePartsSection parts={data.invoice_parts} />
                <InvoiceServicesSection services={data.invoice_services} />
                <InvoiceExpensesSection expenses={data.invoice_expenses} />
                <InvoicePaymentsSection></InvoicePaymentsSection>
                <InvoiceTotalsSummary />
            </div>
        </DashboardPage>
    )
}
