import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { BillActions } from '@/modules/bills/bill-actions'
import { BillProvider, type BillResponse } from '@/modules/bills/bill-context'
import BillStatusBadge from '@/modules/bills/bill-status-badge'
import { ReceiptIcon } from 'lucide-react'
import React from 'react'

export default async function BillDetailLayout(props: {
    params: Promise<{ id: string }>
    children: React.ReactNode
}) {
    const { id } = await props.params
    const api = await getServerApi()
    const bill = await api.bills.show(id)
    const data = bill.data as BillResponse
    const title = data?.title || data?.bill_number || 'Bill Details'
    return (
        <BillProvider bill={data}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                title={title}
                description={data?.bill_number ? `Bill #: ${data.bill_number}` : undefined}
                icon={<ReceiptIcon className="size-5" />}
                backHref="/purchase/bill"
                actions={
                    <div className="flex space-x-2 items-center">
                        <BillStatusBadge bill={{id, status:data?.status}} />
                        <BillActions billId={id} />
                    </div>
                }
                tabs={[
                    {
                        href: `/purchase/bill/${id}`,
                        label: 'Details',
                    },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </BillProvider>
    )
}