import AddFileModal from "@/components/customComponent/AddModal/AddFileModal";
import { DeleteToast } from "@/components/customComponent/Toast/ToastMixin";
import ReuseableColumn from "@/components/dataTableReuseable/ReuseableColumn";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
} from "@/components/ui/dropdown-menu";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";

import { Input } from "@/components/ui/input";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { usePage } from "@inertiajs/react";
import {
    useReactTable,
    getCoreRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    getFilteredRowModel,
    flexRender,
} from "@tanstack/react-table";
import React from "react";
export default function Users() {
    const {
        files,
        agents,
        visaTypes,
        visa_statuses,
        conditions,
        embassyMember,
    } = usePage().props;
    const data = files ?? [];
    const handleDelete = (id) => {
        const DeleteToastProps = {
            alertTitle: "Do you want to Delete File?",
            deleteRoute: "files",
            id: id,
            successPurpose: "File",
            cancelPurpose: "File",
        };
        DeleteToast(DeleteToastProps);
    };
    const handleAgentFilter = (value) => {
        const column = table.getColumn("agent");
        if (!column) return;

        column.setFilterValue(value === "all" ? undefined : value);
    };

    const handleConditionFilter = (value) => {
        const column = table.getColumn("file_condition");
        if (!column) return;

        column.setFilterValue(value === "all" ? undefined : value);
    };
    const handleVisaStatusFilter = (value) => {
        const column = table.getColumn("visa_status");
        if (!column) return;

        column.setFilterValue(value === "all" ? undefined : Number(value));
    };

    const columns = ReuseableColumn({
        showActions: true,
        file: true,
        columnConfig: [
            { accessorKey: "file_unique_id", header: "File ID" },
            { accessorKey: "file_name", header: "File Name" },
            { accessorKey: "passport_no", header: "Passport" },
            { accessorKey: "entry_date", header: "Entry Date" },
            { accessorKey: "visa_type.visa_type", header: "Visa Type" },
            // { accessorKey: "visa_status.visa_status", header: "Visa Status" },
            // {
            //     accessorKey: "file_condition.condition",
            //     header: "File Condition",
            //     enableColumnFilter: true,
            // },
            // {
            //     accessorKey: "agent.name",
            //     header: "Agent",
            //     enableColumnFilter: true,
            // },
            {
                id: "file_condition",
                header: "File Condition",
                accessorFn: (row) => row.file_condition?.condition ?? "",
                enableColumnFilter: true,
            },
            {
                id: "agent",
                header: "Agent",
                accessorFn: (row) => row.agent?.name ?? "",
                enableColumnFilter: true,
            },
            { accessorKey: "payable_amount", header: "Payable" },
        ],
        handleDelete,
        agents,
        visaTypes,
        visa_statuses,
        conditions,
        embassyMember,
    });
    const [sorting, setSorting] = React.useState([]);
    const [columnFilters, setColumnFilters] = React.useState([]);
    const [columnVisibility, setColumnVisibility] = React.useState({});
    const [globalFilter, setGlobalFilter] = React.useState("");
    const [rowSelection, setRowSelection] = React.useState({});
    const globalFilterFn = (row, columnId, filterValue) => {
        const search = String(filterValue).toLowerCase().trim();

        const searchableFields = [
            row.original.file_name,
            row.original.file_unique_id,
            row.original.web_file_number,
            row.original.passport_no,
            row.original.agent?.name,
            row.original.visa_type?.visa_type,
            row.original.visa_status?.visa_status,
            row.original.file_condition?.condition,
        ];

        return searchableFields.some(
            (value) =>
                value !== null &&
                value !== undefined &&
                String(value).toLowerCase().includes(search),
        );
    };

    const table = useReactTable({
        data,
        columns,

        state: {
            sorting,
            columnFilters,
            columnVisibility,
            rowSelection,
            globalFilter,
        },

        onGlobalFilterChange: setGlobalFilter,
        globalFilterFn,

        onSortingChange: setSorting,
        onColumnFiltersChange: setColumnFilters,
        onColumnVisibilityChange: setColumnVisibility,
        onRowSelectionChange: setRowSelection,

        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),

        initialState: {
            pagination: {
                pageSize: 100,
            },
        },
    });

    const modalProps = {
        buttonName: "Add File",
        modalTitle: "Add New File",
        agents,
        visaTypes,
        visa_statuses,
        conditions,
        embassyMember,
    };

    return (
        <div className="w-full">
            <div className="flex items-center py-4 gap-4">
                <Input
                    placeholder="Search anything"
                    value={globalFilter ?? ""}
                    onChange={(e) => setGlobalFilter(e.target.value)}
                    className="max-w-full bg-white"
                />
                <DropdownMenu>
                    <div className="flex items-center py-4 gap-4">
                        {/* 👤 Agent Filter */}
                        <Select
                            defaultValue="all"
                            onValueChange={handleAgentFilter}
                        >
                            <SelectTrigger className="w-[180px] bg-white">
                                <SelectValue placeholder="Filter by Agent" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">All Agents</SelectItem>
                                {agents.map((agent) => (
                                    <SelectItem
                                        key={agent.id}
                                        value={agent.name}
                                    >
                                        {agent.name}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        {/* 📂 File Condition Filter */}
                        <Select
                            defaultValue="all"
                            onValueChange={handleConditionFilter}
                        >
                            <SelectTrigger className="w-[200px] bg-white">
                                <SelectValue placeholder="Filter by Condition" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">
                                    All Conditions
                                </SelectItem>
                                {conditions.map((condition) => (
                                    <SelectItem
                                        key={condition.id}
                                        value={condition.condition}
                                    >
                                        {condition.condition}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {/* 🟢 Visa Status Filter */}
                        <Select
                            defaultValue="all"
                            onValueChange={handleVisaStatusFilter}
                        >
                            <SelectTrigger className="w-[220px] bg-white">
                                <SelectValue placeholder="Filter by Visa Status" />
                            </SelectTrigger>

                            <SelectContent>
                                <SelectItem value="all">
                                    All Visa Status
                                </SelectItem>

                                {visa_statuses.map((status) => (
                                    <SelectItem
                                        key={status.id}
                                        value={String(status.id)} // ✅ ID
                                    >
                                        {status.visa_status}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <AddFileModal modalProps={modalProps} />
                    </div>
                    {/* <AddFileModal modalProps={modalProps} /> */}
                    <DropdownMenuContent align="end">
                        {table
                            .getAllColumns()
                            .filter((column) => column.getCanHide())
                            .map((column) => {
                                return (
                                    <DropdownMenuCheckboxItem
                                        key={column.id}
                                        className="capitalize"
                                        checked={column.getIsVisible()}
                                        onCheckedChange={(value) =>
                                            column.toggleVisibility(!!value)
                                        }
                                    >
                                        {column.id}
                                    </DropdownMenuCheckboxItem>
                                );
                            })}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
            <div className="overflow-hidden rounded-md border">
                <Table className="bg-white">
                    <TableHeader>
                        {table.getHeaderGroups().map((headerGroup) => (
                            <TableRow key={headerGroup.id}>
                                {headerGroup.headers.map((header) => {
                                    return (
                                        <TableHead key={header.id}>
                                            {header.isPlaceholder
                                                ? null
                                                : flexRender(
                                                      header.column.columnDef
                                                          .header,
                                                      header.getContext(),
                                                  )}
                                        </TableHead>
                                    );
                                })}
                            </TableRow>
                        ))}
                    </TableHeader>
                    <TableBody>
                        {table.getRowModel().rows?.length ? (
                            table.getRowModel().rows.map((row) => (
                                <TableRow
                                    key={row.id}
                                    data-state={
                                        row.getIsSelected() && "selected"
                                    }
                                >
                                    {row.getVisibleCells().map((cell) => (
                                        <TableCell key={cell.id}>
                                            {flexRender(
                                                cell.column.columnDef.cell,
                                                cell.getContext(),
                                            )}
                                        </TableCell>
                                    ))}
                                </TableRow>
                            ))
                        ) : (
                            <TableRow>
                                <TableCell
                                    colSpan={columns.length}
                                    className="h-24 text-center"
                                >
                                    No results.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>
            <div className="flex items-center justify-end space-x-2 py-4">
                <div className="space-x-2">
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => table.previousPage()}
                        disabled={!table.getCanPreviousPage()}
                    >
                        Previous
                    </Button>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => table.nextPage()}
                        disabled={!table.getCanNextPage()}
                    >
                        Next
                    </Button>
                </div>
            </div>
        </div>
    );
}