import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
import { getServerApi } from "@garage/api/server"
import { VendorActions } from "@/modules/vendors/vendor-actions"
import { VendorProvider } from "@/modules/vendors/vendor-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()
    // Guard the fetch: a failed request (404/401/5xx) must not throw and crash
    // the whole route — render the chrome with a fallback title instead.
    let vendor: Record<string, any> | undefined
    try {
        const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
        vendor = response?.data
    } catch (err) {
        console.error(`Failed to load vendor ${id} (layout):`, err)
    }

    const company = vendor?.company_name as string | undefined
    const fullName = [vendor?.first_name, vendor?.last_name].filter(Boolean).join(" ").trim()
    const title = company || fullName || "Vendor Details"
    const isActive = vendor?.is_active ?? vendor?.status === "active"

    return (
        <VendorProvider vendor={{ id, label: title }}>
            <DashboardDetailsPage
                className="p-0 lg:p-0"
                title={title}
                description={vendor?.email ?? vendor?.phone ?? undefined}
                backHref="/purchase/vendor"
                actions={<VendorActions vendorId={id} isActive={Boolean(isActive)} />}
                tabs={[
                    { href: `/purchase/vendor/${id}`, label: "Details" },
                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </VendorProvider>
    )
}