"use client"

import { ResourcePage } from "@/shared/data-view/resource-page"
import FormDialog from "@/shared/components/form-dialog"
import { ImportDataButton } from "@/shared/components/import-data-button"
import { ExportDataButton } from "@/shared/components/export-data-button"
import { PartForm } from "@/modules/parts/part-form"
import { partColumns } from "@/modules/parts/parts-columns"
import { useAuthApi } from "@/shared/useApi"
import { PARTS_ROUTES } from "@garage/api"
import type { PartsClient } from "@garage/api"

export default function PartsPage() {
    const api = useAuthApi()

    return (
        <ResourcePage<PartsClient>
            pageTitle="Parts"
            routeKey={PARTS_ROUTES.INDEX}
            searchable
            searchPlaceholder="Search parts..."
            getClient={(api) => api.parts}
            headerProps={({ selectedItem, invalidateQuery }) => ({
                actions: (
                    <div className="flex items-center gap-2">
                        <ImportDataButton
                            onImport={(file) => api.parts.importData(file)}
                            onSuccess={invalidateQuery}
                            entityLabel="Parts"
                        />
                        <ExportDataButton
                            onExport={(filters) => api.parts.exportData(filters)}
                            fileName="parts"
                        />
                        <FormDialog title="Part">
                            {(resourceId) => (
                                <PartForm
                                    resourceId={resourceId}
                                    initialData={selectedItem}
                                    onSuccess={invalidateQuery}
                                />
                            )}
                        </FormDialog>
                    </div>
                ),
            })}
            columns={({ actionsColumn }) => [
                partColumns.title,
                partColumns.partNumber,
                partColumns.manufacturer,
                partColumns.sellingPrice,
                partColumns.purchasePrice,
                partColumns.stock,
                partColumns.status,
                partColumns.createdAt,
                actionsColumn(),
            ]}

        />
    )
}
