import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { JobCardActions } from '@/modules/job-cards/job-card-actions'
import { JobCardProvider } from '@/modules/job-cards/job-card-context'
import { JobCardStatusStepper } from '@/modules/job-cards/job-card-status-stepper'
import { ClipboardListIcon, Ellipsis, Pencil, Trash2 } from 'lucide-react'
import React from 'react'
import JobCardDropdown from '@/modules/job-cards/job-card-dropdown'


export default async function JobCardDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
    const { id } = await props.params
    const api = await getServerApi()

    const jobCard:any = await api.jobCards.show(id).then(res => res.data)

    const title = jobCard?.title || 'Job Card Details'
    const status = jobCard?.status || 'draft'
    const attachmentsCount = jobCard?.attachment_files?.length ?? jobCard?.documents?.length ?? 0

    return (
        <JobCardProvider jobCard={{ ...jobCard }}>
            <DashboardDetailsPage
                className='p-0 lg:p-0'
                title={title}
                description={status ? `Status: ${status.split("_").map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}` : undefined}
                icon={<ClipboardListIcon className="size-5" />}
                backHref="/sales/job-cards"
                actions={
                    <JobCardDropdown id={id} />
                }
                subHeader={<JobCardStatusStepper jobCardId={id} />}
                tabs={[
                    {
                        href: `/sales/job-cards/${id}`,
                        label: 'Details'
                    },
                    {
                        href: `/sales/job-cards/${id}/parts`,
                        label: `Parts (${jobCard?.parts_count || 0})`
                    },
                    {
                        href: `/sales/job-cards/${id}/services`,
                        label: `Services (${jobCard?.services_count })`
                    },
                    {
                        href: `/sales/job-cards/${id}/expense-items`,
                        label: `Expense Items (${jobCard?.expense_items_count || 0})`
                    },

                



                    // TODO: Needs refactor from API side then refactor in frontend
                    {
                        href: `/sales/job-cards/${id}/attachments`,
                        label: `Attachments (${attachmentsCount})`
                    },

                    {
                        href: `/sales/job-cards/${id}/appointments`,
                        label: `Appointments (${jobCard?.appointments_count || 0})`
                    },
                    // {
                    //     href: `/sales/job-cards/${id}/inspections`,
                    //     label: `Inspections (${(jobCard as any)?.inspections_count || 0})`
                    // },


                    // {
                    //     href: `/sales/job-cards/${id}/tasks`,
                    //     label: `Tasks (${jobCard?.tasks_count || 0})`
                    // },

                    // {
                    //     href: `/sales/job-cards/${id}/purchase-orders`,
                    //     label: `Purchase Orders (${jobCard?.purchase_orders_count || 0})`
                    // },
                    // {
                    //     href: `/sales/job-cards/${id}/bills`,
                    //     label: `Bills (${jobCard?.bills_count || 0})`
                    // },

                ]}
            >
                {props.children}
            </DashboardDetailsPage>
        </JobCardProvider>
    )
}
