"use client"

import React, { useState } from "react"
import type { ColumnDef } from "@tanstack/react-table"
import { Settings2, Plus, ArrowLeft } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { DataTable } from "@/shared/data-view/table-view"
import { createActionsColumn } from "@/shared/data-view/table-view"
import { useCrudDialog, type CrudDialogClient, type UseCrudDialogOptions } from "./use-crud-dialog"

// ── Types ──

export type CrudDialogProps<TClient extends CrudDialogClient> = UseCrudDialogOptions<TClient> & {
    /** Dialog title shown in the header */
    title: string
    /** Table columns (receives `openEdit` and `handleDelete` helpers) */
    columns: (helpers: {
        openEdit: (row: any) => void
        handleDelete: (row: any) => Promise<void>
    }) => ColumnDef<any>[]
    /** Render the create/edit form */
    renderForm: (props: {
        resourceId: string | null
        initialData: any
        onSuccess: () => void
    }) => React.ReactNode
    /** Optional trigger button; defaults to a settings icon button */
    trigger?: React.ReactNode
    /** Custom trigger class */
    triggerClassName?: string
}

// ── Component ──

export function CrudDialog<TClient extends CrudDialogClient>({
    title,
    columns: columnsFn,
    renderForm,
    trigger,
    triggerClassName,
    ...hookOptions
}: CrudDialogProps<TClient>) {
    const [isOpen, setIsOpen] = useState(false)

    const crud = useCrudDialog(hookOptions)

    const columns = columnsFn({
        openEdit: crud.openEdit,
        handleDelete: crud.handleDelete,
    })

    // Add actions column
    const allColumns: ColumnDef<any>[] = [
        ...columns,
        createActionsColumn({
            onEdit: crud.openEdit,
            onDelete: crud.handleDelete,
        }),
    ]

    const handleClose = () => {
        setIsOpen(false)
        crud.closeForm()
    }

    return (
        <>
            {trigger ? (
                <div onClick={() => setIsOpen(true)}>{trigger}</div>
            ) : (
                <Button
                    type="button"
                    size="icon"
                    variant="ghost"
                    className={triggerClassName ?? "h-5 w-5"}
                    onClick={() => setIsOpen(true)}
                    title={`Manage ${title}`}
                >
                    <Settings2 className="h-3.5 w-3.5" />
                </Button>
            )}

            <Dialog open={isOpen} onOpenChange={(v) => { if (!v) handleClose() }}>
                <DialogContent className="min-w-2xl max-w-3xl">
                    <DialogHeader>
                        <div className="flex items-center gap-2">
                            {crud.isFormOpen && (
                                <Button
                                    type="button"
                                    size="icon"
                                    variant="ghost"
                                    className="h-7 w-7"
                                    onClick={crud.closeForm}
                                >
                                    <ArrowLeft className="h-4 w-4" />
                                </Button>
                            )}
                            <DialogTitle className="text-xl font-bold">
                                {crud.isFormOpen
                                    ? (crud.editingId ? `Edit ${title}` : `New ${title}`)
                                    : title}
                            </DialogTitle>
                        </div>
                    </DialogHeader>

                    <ScrollArea className="max-h-[75vh]">
                        {crud.isFormOpen ? (
                            <div className="px-1">
                                {renderForm({
                                    resourceId: crud.editingId,
                                    initialData: crud.editingItem,
                                    onSuccess: crud.handleFormSuccess,
                                })}
                            </div>
                        ) : (
                            <div className="space-y-3 px-1">
                                <div className="flex justify-end">
                                    <Button
                                        type="button"
                                        size="sm"
                                        onClick={crud.openCreate}
                                    >
                                        <Plus className="h-4 w-4" />
                                        Add {title}
                                    </Button>
                                </div>
                                <DataTable
                                    columns={allColumns}
                                    data={crud.items}
                                    pagination={crud.pagination}
                                    sorting={crud.sorting}
                                    onChange={crud.handleChange}
                                    isLoading={crud.isLoading}
                                />
                            </div>
                        )}
                    </ScrollArea>
                </DialogContent>
            </Dialog>
        </>
    )
}