import { ArchiveX, EyeIcon } from "lucide-react";
import { UpdateAgentModal } from "../customComponent/UpdateModal/UpdateAgentModal";
import { UpdateFileConditionModal } from "../customComponent/UpdateModal/UpdateFileConditionModal";
import { UpdateUserModal } from "../customComponent/UpdateModal/UpdateUserModal";
import { UpdateVisaStatusModal } from "../customComponent/UpdateModal/UpdateVisaStatusModal";
import { UpdateVisaTypeModal } from "../customComponent/UpdateModal/UpdateVisaTypeModal";
import { Button } from "../ui/button";
import { useForm } from "react-hook-form";
import { router } from "@inertiajs/react";
import { Form } from "../ui/form";
import { FormField, FormItem, FormControl } from "../ui/form";
import {
    Select,
    SelectTrigger,
    SelectValue,
    SelectContent,
    SelectItem,
} from "../ui/select";
import { useState } from "react";
import { ToastMessage } from "../customComponent/Toast/ToastMixin";
import { FileView } from "../customComponent/UpdateModal/FileView";
import LedgerReportModal from "../customComponent/AddModal/LedgerReportModal";
import StatusProgressModal from "../customComponent/AddModal/StatusProgressModal";
import { UpdateParticularModal } from "../customComponent/UpdateModal/UpdateParticularModal";
import { UpdateEmbassyModal } from "../customComponent/UpdateModal/UpdateEmbassyModal";
import EmbassyLedgerModal from "../customComponent/AddModal/EmbassyLedgerModal";
import { UpdateFileModal } from "../customComponent/UpdateModal/UpdateFileModal";
export default function ReuseableColumn({
    showActions = false,
    visaType = false,
    visaStatus = false,
    fileCondition = false,
    embassyPayment = false,
    particular = false,
    agent = false,
    embassy = false,
    canDeleteUser,
    handleDelete,
    allUsers = false,
    agentPayment = false,
    agents,
    particulars,
    visaTypes,
    visa_statuses,
    conditions,
    file = false,
    columnConfig = [],
    embassyMember,
} = {}) {
    const columns = [
        {
            id: "sl",
            header: () => <span className="font-bold">SL</span>,
            cell: ({ row }) => (
                <span className="font-medium">{row.index + 1}</span>
            ),
            enableSorting: false,
        },
        ...columnConfig.map(({ id, accessorKey, accessorFn, header }) => ({
            id: id ?? accessorKey, // ✅ REQUIRED
            accessorKey,
            accessorFn,

            // ✅ DO NOT wrap header blindly
            header:
                typeof header === "function"
                    ? header
                    : () => <span className="font-bold">{header}</span>,

            cell: ({ getValue }) => (
                <div className="font-medium">{getValue()}</div>
            ),
        })),
    ];

    if (showActions && allUsers) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update User",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateUserModal updateProps={updateProps} />
                        {canDeleteUser && canDeleteUser(rowData) && (
                            <Button
                                onClick={() => handleDelete(rowData.id)}
                                className="bg-red-600 text-white hover:bg-red-700 "
                            >
                                Delete
                            </Button>
                        )}
                    </div>
                );
            },
        });
    }
    if (showActions && visaType) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update Visa Type",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateVisaTypeModal updateProps={updateProps} />
                        <Button
                            onClick={() => handleDelete(rowData.id)}
                            className="bg-red-600 text-white hover:bg-red-700 "
                        >
                            Delete
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && particular) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update Particualr",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateParticularModal updateProps={updateProps} />
                        <Button
                            onClick={() => handleDelete(rowData.id)}
                            className="bg-red-600 text-white hover:bg-red-700 "
                        >
                            Delete
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && visaStatus) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update Visa Status",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateVisaStatusModal updateProps={updateProps} />
                        <Button
                            onClick={() => handleDelete(rowData.id)}
                            className="bg-red-600 text-white hover:bg-red-700 "
                        >
                            Delete
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && fileCondition) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update File Condition",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateFileConditionModal updateProps={updateProps} />
                        <Button
                            onClick={() => handleDelete(rowData.id)}
                            className="bg-red-600 text-white hover:bg-red-700 "
                        >
                            Delete
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && agent) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update Agent",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateAgentModal updateProps={updateProps} />
                        <Button
                            onClick={() => handleDelete(rowData.id)}
                            className="bg-red-600 text-white hover:bg-red-700 "
                        >
                            Delete
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && embassy) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;
                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update Embassy Member",
                    data: rowData,
                };

                return (
                    <div className="flex justify-start font-medium gap-2">
                        <UpdateEmbassyModal updateProps={updateProps} />
                        <Button
                            onClick={() => handleDelete(rowData.id)}
                            className="bg-red-600 text-white hover:bg-red-700 "
                        >
                            Delete
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && file) {
        columns.push({
            id: "visa_status",
            header: () => <span className="font-bold">Visa Status</span>,

            // ✅ FILTER USES visa_status.id
            accessorFn: (row) => row.visa_status?.id ?? null,

            enableColumnFilter: true,
            enableHiding: false,
            filterFn: "equals",
            cell: ({ row }) => {
                const fileRow = row.original;

                const form = useForm({
                    defaultValues: {
                        // ✅ FIXED: use visa_status.id
                        visa_status_id: fileRow.visa_status?.id
                            ? String(fileRow.visa_status.id)
                            : "",
                    },
                });

                const handleStatusChange = (value) => {
                    router.patch(
                        `/files-visa-status/${fileRow.id}`,
                        { visa_status_id: Number(value) },
                        {
                            preserveScroll: true,
                            onSuccess: () =>
                                ToastMessage(
                                    "success",
                                    "Status updated successfully",
                                ),
                            onError: () =>
                                ToastMessage("error", "Something went wrong"),
                        },
                    );
                };

                return (
                    <Form {...form}>
                        <FormField
                            control={form.control}
                            name="visa_status_id"
                            render={({ field }) => (
                                <FormItem>
                                    <FormControl>
                                        <Select
                                            value={field.value ?? ""}
                                            onValueChange={(value) => {
                                                field.onChange(value);
                                                handleStatusChange(value);
                                            }}
                                        >
                                            <SelectTrigger className="w-full">
                                                <SelectValue placeholder="Select Status" />
                                            </SelectTrigger>

                                            <SelectContent>
                                                {visa_statuses.map((status) => (
                                                    <SelectItem
                                                        key={status.id}
                                                        value={String(
                                                            status.id,
                                                        )}
                                                    >
                                                        {status.visa_status}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                    </Form>
                );
            },
        });

        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;

                const updateProps = {
                    buttonName: "Edit",
                    modalTitle: "Update File",
                    data: rowData,
                    agents,
                    visaTypes,
                    visa_statuses,
                    conditions,
                    embassyMember,
                };
                const fileView = {
                    data: rowData,
                };
                const Progress = {
                    name: rowData?.file_name,
                    history: rowData?.status_histories,
                };

                return (
                    <div className="flex justify-start font-medium gap-1.5">
                        <StatusProgressModal Progress={Progress} />
                        <FileView fileView={fileView} />
                        <UpdateFileModal updateProps={updateProps} />
                        <Button
                            variant="fileButton"
                            size="fileButton"
                            onClick={() => handleDelete(rowData.id)}
                            className="text-red-600"
                        >
                            <ArchiveX />
                        </Button>
                    </div>
                );
            },
        });
    }
    if (showActions && agentPayment) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;

                const modalProps = {
                    rowData: rowData,
                };
                return (
                    <div className="flex justify-start font-medium gap-1.5">
                        <LedgerReportModal modalProps={modalProps} />
                    </div>
                );
            },
        });
    }
    if (showActions && embassyPayment) {
        columns.push({
            id: "actions",
            header: () => <span className="font-bold">Action</span>,
            enableHiding: false,
            cell: ({ row }) => {
                const rowData = row.original;

                const modalProps = {
                    rowData: rowData,
                };
                return (
                    <div className="flex justify-start font-medium gap-1.5">
                        <EmbassyLedgerModal modalProps={modalProps} />
                    </div>
                );
            },
        });
    }

    return columns;
}