"use client"

import React from "react"
import { DashboardHeader } from "@/base/components/layout/dashboard"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
import FormDialog from "@/shared/components/form-dialog"
import { Card, CardContent } from "@/shared/components/ui/card"
import { DataTable, type ActionsColumnOptions } from "@/shared/data-view/table-view"
import { useResourcePage, type UseResourcePageOptions, type ResourceItem, type ResourcePageClient } from "./use-resource-page"
import type { ColumnDef } from "@tanstack/react-table"

export type ResourceFormProps<TClient extends ResourcePageClient> = {
    resourceId: string | null
    initialData: ResourceItem<TClient> | null
    onSuccess: () => void
}

export type ResourcePageColumnHelpers<TClient extends ResourcePageClient> = {
    actionsColumn: (options?: Partial<ActionsColumnOptions<ResourceItem<TClient>>>) => ColumnDef<ResourceItem<TClient>, unknown>
    openEdit: (row: ResourceItem<TClient>) => void
    deleteItem: (id: string) => Promise<unknown>
}

export type ResourcePageProps<TClient extends ResourcePageClient> = UseResourcePageOptions<TClient> & {
    title: string
    columns: ColumnDef<ResourceItem<TClient>>[] | ((helpers: ResourcePageColumnHelpers<TClient>) => ColumnDef<ResourceItem<TClient>>[])
    renderForm: (props: ResourceFormProps<TClient>) => React.ReactNode
    pageTitle?: string
    paramKey?: string
}

export function ResourcePage<TClient extends ResourcePageClient>({
    title,
    columns: columnsProp,
    renderForm,
    pageTitle,
    routeKey,
    getClient,
    queryOptions,
    paramKey,
}: ResourcePageProps<TClient>) {
    type TItem = ResourceItem<TClient>
    const page = useResourcePage<TClient>({ routeKey, getClient, queryOptions, paramKey })

    const columns = typeof columnsProp === "function"
        ? columnsProp({
            actionsColumn: page.actionsColumn,
            openEdit: page.openEdit,
            deleteItem: page.deleteItem,
        })
        : columnsProp

    type ListResponse = { data?: TItem[] }
    const responseData = page.data as ListResponse | undefined

    return (
        <DashboardPage
            header={
                <DashboardHeader
                    actions={
                        <FormDialog title={title} paramKey={paramKey}>
                            {(resourceId) =>
                                renderForm({
                                    resourceId,
                                    initialData: page.selectedItem,
                                    onSuccess: () => page.invalidateQuery(),
                                })
                            }
                        </FormDialog>
                    }
                />
            }
            title={pageTitle}
        >
            <Card>
                <CardContent>
                    <DataTable
                        columns={columns}
                        data={(responseData?.data ?? []) as TItem[]}
                        pagination={page.pagination}
                        sorting={page.sorting}
                        onChange={page.handleChange}
                        isLoading={page.isLoading}
                    />
                </CardContent>
            </Card>
        </DashboardPage>
    )
}