"use client"

import { use } from "react"
import { useQuery } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { InspectionForm } from "@/modules/inspections/inspection-form"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
import { INSPECTION_ROUTES } from "@garage/api"

export default function InspectionEditPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = use(params)
    const api = useAuthApi()
    const router = useRouter()

    const { data, isLoading } = useQuery({
        queryKey: [INSPECTION_ROUTES.BY_ID, id],
        queryFn: () => api.inspections.getById(id),
    })

    if (isLoading) {
        return (
            <DashboardPage header={null}>
                <div className="flex items-center justify-center p-8 text-muted-foreground">
                    Loading...
                </div>
            </DashboardPage>
        )
    }

    return (
        <DashboardPage header={null}>
            <div className="mx-auto max-w-2xl p-6">
                <InspectionForm
                    resourceId={id}
                    initialData={data}
                    onSuccess={() => router.push(`/sales/inspections/${id}`)}
                />
            </div>
        </DashboardPage>
    )
}