import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { CustomerActions } from '@/modules/customers/customer-actions'
import { CustomerProvider } from '@/modules/customers/customer-context'
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 customer = await api.customers.getById(id)

    const firstName = customer.data?.first_name ?? ''
    const lastName = customer.data?.last_name ?? ''
    const fullName = [firstName, lastName].filter(Boolean).join(' ') || 'Customer Details'
    const customerLabel = fullName

    return (
        <>
            <CustomerProvider customer={{ id, label: customerLabel }}>
                <DashboardDetailsPage
                    className="p-0 lg:p-0"
                    title={fullName}
                    description={customer.data?.email ?? customer.data?.phone ?? undefined}
                    backHref="/sales/customers"
                    actions={<CustomerActions customerId={id} />}
                    tabs={[
                        { href: `/sales/customers/${id}`, label: 'Details' },
                        { href: `/sales/customers/${id}/notes`, label: 'Notes' },
                        { href: `/sales/customers/${id}/vehicles`, label: 'Vehicles' },
                    ]}
                >
                    {props.children}
                </DashboardDetailsPage>
            </CustomerProvider>
        </>
    )
}