import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { InvoiceActions } from '@/modules/invoices/invoice-actions'
import { InvoiceProvider } from '@/modules/invoices/invoice-context'
import { ReceiptIcon } from 'lucide-react'
import React from 'react'
import InvoiceStatusBadge from '@/modules/invoices/invoice-status-badge'

export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
    const { id } = await props.params
    const api = await getServerApi()
    const invoice = await api.invoices.show(id)
    const data = (invoice as any)?.data ?? invoice
    const title = data?.subject || data?.invoice_number || 'Invoice Details'

    return (
        <InvoiceProvider invoice={data}>
            <DashboardDetailsPage
                className='p-0 lg:p-0'
                title={title}
                description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
                icon={<ReceiptIcon className="size-5" />}
                backHref="/sales/invoice"
                actions={
                    <div className="flex space-x-2 items-center">

                        <InvoiceStatusBadge invoice={{id, status:data?.status}} />
                        <InvoiceActions invoiceId={id} />
                    </div>
                }
                tabs={[
                    {
                        href: `/sales/invoice/${id}`,
                        label: 'Details'
                    },

                    {
                        href: `/sales/invoice/${id}/documents`,
                        label: 'Documents'
                    },
                    {
                        href: `/sales/invoice/${id}/notes`,
                        label: 'Notes'
                    },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </InvoiceProvider>
    )
}