import PermissionController from "@/actions/App/Http/Controllers/PermissionController";
import AppPagination from "@/components/app-pagination";
import DataTable from "@/components/data-table";
import EmptyData from "@/components/empty-data";
import PageHeader from "@/components/page-header";
import { useQueryParams } from "@/hooks/use-query-params";
import AppLayout, { MySwalTheme } from "@/layouts/app-layout";
// import AppPageHeader from "@/layouts/app-page-header";
import permissions from "@/routes/permissions";
import { FlashProps, MetaPagination, MetaTags } from "@/types";
import { UserPermission } from "@/types/user";
import { dateTimeFormatter } from "@/utils/date-formatter";
import { Head, Link, router, usePage } from "@inertiajs/react";
import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { debounce } from "lodash";
import { useEffect, useMemo, useState } from "react";
import { Badge, Button, Container, Dropdown, Form } from "react-bootstrap";
import { MdAdd } from "react-icons/md";
import { PiDotsThreeOutlineDuotone, PiMagnifyingGlassDuotone, PiPlus, PiSpeedometerDuotone } from "react-icons/pi";
import { toast } from "react-toastify";

interface Props {
    metaTags: MetaTags;
    responseData: {
        data: UserPermission[];
        meta: MetaPagination;
    };
}

export default function IndexPage({ metaTags, responseData }: Props) {
    const { flash } = usePage<FlashProps>().props;
    const [params, setParams] = useQueryParams();
    const [searchValue, setSearchValue] = useState(params.search || '');

    useEffect(() => {
        if (!flash) return;

        // Success message from session
        if (flash.success) {
            const msg = typeof flash.success === 'string' ? flash.success : JSON.stringify(flash.success);
            toast.success(msg);
        }

        // Error message from session
        if (flash.error) {
            const msg = typeof flash.error === 'string' ? flash.error : JSON.stringify(flash.error);
            toast.error(msg);
        }

        // Optional: info or warning
        if (flash.info) {
            const msg = typeof flash.info === 'string' ? flash.info : JSON.stringify(flash.info);
            toast.info(msg);
        }
    }, [flash]);

    const debouncedSearch = debounce((value: string) => {
        setParams({ search: value, page: 1 });
    }, 1000);

    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearchValue(e.target.value);
        debouncedSearch(e.target.value);
    };

    const handleSort = (columnId: string) => {
        const isDesc = params.sort === columnId && params.order === 'desc';
        const newOrder = isDesc ? 'asc' : 'desc';
        setParams({
            sort: columnId,
            order: newOrder,
            page: 1
        });
    };

    const handlePageChange = (page: number) => {
        setParams({ page });
    };

    const handlePerPageChange = (perPage: number) => {
        setParams({
            per_page: perPage,
            page: 1
        });
    };

    const handleDelete = (item: UserPermission) => {
        MySwalTheme.fire({
            title: "Are you sure?",
            html: `Permission <b>"${item.name}"</b> will be permanently deleted.<br/><small class="text-danger">This action cannot be undone.</small>`,
            icon: "question",
            confirmButtonText: "Delete",
            showCancelButton: true,
        }).then((val) => {
            if (val.isConfirmed) {
                return router.delete(permissions.destroy.url(item.id), {
                    preserveScroll: true,
                });
            }
        });
    }

    const columnHelper = createColumnHelper<UserPermission>();

    const columns = [
        columnHelper.display({
            id: 'actions',
            enableSorting: false,
            cell: (info) => (
                <Dropdown drop="end" className="no-caret">
                    <Dropdown.Toggle variant="light" id="dropdown-actions" size="sm">
                        <PiDotsThreeOutlineDuotone />
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item onClick={() => router.visit(permissions.edit.url(info.row.original.id))}>Edit</Dropdown.Item>
                        <Dropdown.Item onClick={() => handleDelete(info.row.original)}>Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            ),
            header: 'Actions'
        }),
        columnHelper.accessor('name', {
            cell: info => (
                <Link
                    href={permissions.edit.url(info.row.original.id)}
                    className="text-decoration-none fw-semibold"
                >{info.getValue()}</Link>
            ),
            header: () => <div className="text-start">Name</div>
        }),
        columnHelper.accessor('guard_name', {
            cell: info => <div className="text-start">{info.getValue()}</div>,
            header: () => <div className="text-start">Guard</div>
        }),
        columnHelper.accessor('roles', {
            cell: info => (
                <div className="d-flex flex-wrap gap-1">
                    {info.getValue()?.map(role => (
                        <Badge key={role.id} bg="info-subtle" className="text-info">{role.name}</Badge>
                    ))}
                </div>
            ),
            header: () => <div className="text-start">Assigned Roles</div>
        }),
        columnHelper.accessor('created_at', {
            cell: info => <div className="text-start small text-muted">{dateTimeFormatter(info.getValue())}</div>,
            header: () => <div className="text-start">Created At</div>
        }),
    ];
    const tableKey = useMemo(() => {
        return `${responseData.meta.total}-${responseData.meta.current_page}-${params.search || ""}-${params.sort || ""}-${params.order || ""}`;
    }, [
        responseData.meta.total,
        responseData.meta.current_page,
        params.search,
        params.sort,
        params.order,
    ]);
    const table = useReactTable({
        data: responseData.data,
        columns,
        manualSorting: true,
        manualFiltering: true,
        manualPagination: true,
        pageCount: responseData.meta.last_page,
        state: {
            pagination: {
                pageIndex: responseData.meta.current_page - 1,
                pageSize: responseData.meta.per_page,
            },
        },
        getCoreRowModel: getCoreRowModel(),
    });

    return (
        <AppLayout>
            <Head title={metaTags.title} />

            {/* <AppPageHeader
                title={metaTags.title}
                description={metaTags.description}
                breadcrumb={[
                    {
                        title: (
                            <div className="d-flex align-items-center gap-1">
                                <PiSpeedometerDuotone className="mb-0 fs-5 text-primary" />
                            </div>
                        ),
                        url: '/dashboard',
                    },
                    {
                        title: 'Management',
                        active: true,
                    },
                    {
                        title: metaTags.title,
                        active: true,
                    },
                ]}
            /> */}

            {/* <Container className="p-0">
                <div className="mb-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div className="d-flex flex-wrap align-items-center gap-2">
                        <div className="app-input-group">
                            <div className="app-input-group-icon">
                                <PiMagnifyingGlassDuotone />
                            </div>
                            <Form.Control
                                type="search"
                                name="search"
                                value={searchValue}
                                onChange={handleSearch}
                                placeholder="Search..."
                            />
                        </div>
                    </div>
                    <div>
                        <Button variant="primary" className="btn-icon-label" onClick={() => router.visit(PermissionController.create.url())}>
                            <PiPlus />
                            <span>Add new Role</span>
                        </Button>
                    </div>
                </div>

                <DataTable
                    table={table}
                    params={params}
                    onSort={handleSort}
                    defaultSortColumn="name"
                />

                {responseData.meta.total === 0 && <EmptyData />}

                <AppPagination
                    meta={responseData.meta}
                    onPageChange={handlePageChange}
                    onPerPageChange={handlePerPageChange}
                />
            </Container> */}

            <Container fluid className="p-0">
                <PageHeader title={metaTags.title} />

                <div className="mb-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div className="d-flex flex-wrap align-items-center gap-2">
                        <div className="position-relative">
                            <Form.Control
                                type="search"
                                name="search"
                                value={searchValue}
                                onChange={handleSearch}
                                placeholder="Search..."
                                style={{ minWidth: "250px" }}
                            />
                        </div>
                    </div>
                    <div>
                        <Button
                            variant="success"
                            className="btn-icon-label"
                            onClick={() => router.visit(PermissionController.create.url())}
                        >
                            <MdAdd />
                            <span>Tambah</span>
                        </Button>
                    </div>
                </div>

                <DataTable
                    key={tableKey}
                    table={table}
                    params={params}
                    onSort={handleSort}
                    defaultSortColumn="tgl"
                // isExpanded={isExpanded}
                />

                {responseData.meta.total === 0 && <EmptyData />}

                <AppPagination
                    meta={responseData.meta}
                    onPageChange={handlePageChange}
                    onPerPageChange={handlePerPageChange}
                />
            </Container>
        </AppLayout>
    )
}