import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { PurchaseOrderActions } from '@/modules/purchase-orders/purchase-order-actions'
import { PurchaseOrderProvider } from '@/modules/purchase-orders/purchase-order-context'
import { CreateBillFromPOButton } from '@/modules/purchase-orders/create-bill-from-po-button'
import { ClipboardList } from 'lucide-react'
import React from 'react'

export default async function layout(props: {
    params: Promise<{ id: string }>
    children: React.ReactNode
}) {
    const { id } = await props.params
    const api = await getServerApi()
    const purchaseOrder = (await api.purchaseOrders.getById(id)) as any

    const data = purchaseOrder?.data ?? purchaseOrder
    const title = data?.title || data?.order_number || 'Purchase Order'
    const orderNumber = data?.order_number
    const description = orderNumber ? `Order #: ${orderNumber}` : undefined

    return (
        <PurchaseOrderProvider purchaseOrder={{ id, label: title, data }}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                icon={<ClipboardList className="size-5" />}
                title={title}
                description={description}
                backHref="/purchase/purchase-order"
                actions={
                    <div className="flex items-center gap-2">
                        <CreateBillFromPOButton />
                        <PurchaseOrderActions purchaseOrderId={id} />
                    </div>
                }
                tabs={[
                    { href: `/purchase/purchase-order/${id}`, label: 'Details' },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </PurchaseOrderProvider>
    )
}