import RefTipeIzinController from "@/actions/App/Http/Controllers/Master/RefTipeIzinController";
import AppPagination from "@/components/app-pagination";
import DataTable from "@/components/data-table";
import EmptyData from "@/components/empty-data";
import { useQueryParams } from "@/hooks/use-query-params";
import { useDataTable } from "@/hooks/use-data-table";
import { useSearch } from "@/hooks/use-search";
import { useExpanding } from "@/hooks/use-expanding";
import AppLayout, { MySwalTheme } from "@/layouts/app-layout";
import { Head, router, useForm, usePage } from "@inertiajs/react";
import { useMemo, useCallback, ReactNode, useEffect, useState } from "react";
import {
    Badge,
    Button,
    Col,
    Container,
    Dropdown,
    Form,
    Image,
    Modal,
    Row,
} from "react-bootstrap";
import { MdAdd, MdMoreHoriz } from "react-icons/md";
import {
    PiCaretDown,
    PiCaretRight,
    PiNavigationArrowFill,
} from "react-icons/pi";
import { CellContext } from "@tanstack/react-table";
import GoogleMapEmbed from "@/components/google-map-embed";
import { SelectOption, SharedData } from "@/types";
import { toast } from "react-toastify";
import ListView from "@/components/listview";
import PageHeader from "@/components/page-header";
import { dateTimeFormatter, timeFormatter } from "@/utils/date-formatter";
import { time } from "console";
import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api";
import Select from "react-select";
import { number } from "framer-motion";
import {
    RefTipeIzin,
    RefTipeIzinForm,
    RefTipeIzinProps,
} from "@/types/ref-tipe-izin";

export default function RefTipeIzinPage({ title, resource }: RefTipeIzinProps) {
    const { flash } = usePage<SharedData>().props;
    const [params, setParams] = useQueryParams();
    const [showModal, setShowModal] = useState(false);
    const [selected, setSelected] = useState<any>(null);

    const { data, setData, post, put, processing, errors, reset } =
        useForm<RefTipeIzinForm>({
            name: "",
        });

    useEffect(() => {
        if (flash?.success) {
            toast.success(flash.success);
        }
        if (flash?.error) {
            toast.error(flash.error);
        }
    }, [flash]);

    // Expanding functionality
    const {
        expanded,
        toggleExpanded,
        expandAll,
        collapseAll,
        isExpanded,
        expandedCount,
    } = useExpanding({
        multipleExpansion: true,
    });

    // Search functionality
    const { searchValue, handleSearch } = useSearch({
        initialValue: params.search || "",
        onSearch: useCallback(
            (value: string) => {
                // Jika value kosong, pass undefined untuk menghapus parameter search dari URL
                setParams({ search: value.trim() || undefined });
            },
            [setParams],
        ),
        debounceMs: 500,
    });

    // Sort handler
    const handleSort = useCallback(
        (columnId: string) => {
            const isCurrentSort = params.sort === columnId;
            const isDesc = isCurrentSort && params.order === "desc";
            const newOrder = isDesc ? "asc" : "desc";

            setParams({
                sort: columnId,
                order: newOrder,
            });
        },
        [params.sort, params.order, setParams],
    );

    // Pagination handlers
    const handlePageChange = useCallback(
        (page: number) => {
            setParams({ page });
        },
        [setParams],
    );

    const handlePerPageChange = useCallback(
        (perPage: number) => {
            setParams({ per_page: perPage });
        },
        [setParams],
    );

    const handleCreateOpen = () => {
        setSelected(null);
        setData({
            name: "",
        });
        setShowModal(true);
    };

    const handleEditOpen = (tipeIzin: any) => {
        setSelected(tipeIzin);
        setData({
            name: tipeIzin.name ?? "",
        });
        setShowModal(true);
    };
    const handleSubmit = () => {
        if (selected) {
            put(`/ref-tipe-izin/${selected.id}`, {
                preserveScroll: true,
                onSuccess: () => {
                    MySwalTheme.fire({
                        icon: "success",
                        title: "Berhasil",
                        text: "Data Ref Tipe Izin berhasil diperbarui",
                        timer: 1500,
                        showConfirmButton: false,
                    });

                    setShowModal(false);
                    reset();
                },
            });
        } else {
            post("/ref-tipe-izin", {
                preserveScroll: true,
                onSuccess: () => {
                    MySwalTheme.fire({
                        icon: "success",
                        title: "Berhasil",
                        text: "Data Ref Tipe Izin berhasil disimpan",
                        timer: 1500,
                        showConfirmButton: false,
                    });

                    setShowModal(false);
                    reset();
                },
            });
        }
    };

    const handleDelete = useCallback((item: RefTipeIzin) => {
        MySwalTheme.fire({
            title: "Are you sure?",
            html: `Data <b>"${item.name}"</b> akan dihapus secara permanen.<br/><small class="text-danger">Tindakan ini tidak dapat dibatalkan.</small>`,
            icon: "question",
            confirmButtonText: "Delete",
            showCancelButton: true,
        }).then((val) => {
            if (val.isConfirmed) {
                return router.delete(
                    RefTipeIzinController.destroy.url(item.id),
                    {
                        preserveScroll: true,
                        onSuccess: () => {
                            MySwalTheme.fire({
                                icon: "success",
                                title: "Berhasil",
                                text: "Data Ref Tipe Izin berhasil dihapus",
                                timer: 1500,
                                showConfirmButton: false,
                            });
                            router.reload({ only: ["resource"] });
                        },
                    },
                );
            }
        });
    }, []);

    // Column definitions - memoized with resource.data dependency untuk re-render ketika data berubah
    const columns = useMemo(
        () => [
            {
                id: "rowNumber",
                header: () => <div className="text-center">No</div>,
                cell: (info: CellContext<RefTipeIzin, ReactNode>) => {
                    const pageIndex = table.getState().pagination.pageIndex;
                    const pageSize = table.getState().pagination.pageSize;
                    const globalIndex =
                        pageIndex * pageSize + info.row.index + 1;
                    return <div className="text-center">{globalIndex}</div>;
                },
            },
            {
                accessorKey: "name",
                id: "name",
                enableSorting: true,
                cell: (info: CellContext<RefTipeIzin, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Tipe Izin</div>,
            },
            {
                id: "actions",
                header: "Actions",
                size: 80,
                enableSorting: false,
                cell: (info: CellContext<RefTipeIzin, ReactNode>) => (
                    <Dropdown drop="end" className="no-caret">
                        <Dropdown.Toggle
                            variant="light-subtle"
                            id="dropdown-actions"
                            size="sm"
                        >
                            <MdMoreHoriz />
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                            <Dropdown.Item
                                onClick={() =>
                                    handleEditOpen(info.row.original)
                                }
                                role="button"
                            >
                                Edit
                            </Dropdown.Item>
                            <Dropdown.Item
                                onClick={() => handleDelete(info.row.original)}
                            >
                                Delete
                            </Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                ),
            },
        ],
        [handleEditOpen, handleDelete],
    );

    // Data table setup - dengan key yang reactive untuk memaksa re-render
    const tableKey = useMemo(() => {
        const dataSignature = resource.data
            .map((item) => `${item.updated_at}`)
            .join("|");
        return `${resource.meta}-${params.search || ""}-${params.sort || ""}-${params.order || ""}-${dataSignature}`;
    }, [resource.meta, params, resource.data]);

    const { table } = useDataTable({
        data: resource.data,
        columns,
        pageCount: resource.meta.last_page,
        currentPage: resource.meta.current_page,
        pageSize: resource.meta.per_page,
        params,
        onSort: handleSort,
        onPageChange: handlePageChange,
        onPerPageChange: handlePerPageChange,
    });

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

            <Container fluid className="p-0">
                <PageHeader title={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={handleCreateOpen}
                        >
                            <MdAdd />
                            <span>Tambah</span>
                        </Button>
                    </div>
                </div>

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

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

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

            <Modal
                size="xl"
                fullscreen="md-down"
                show={showModal}
                onHide={() => setShowModal(false)}
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title>
                        {selected
                            ? "Edit Ref Tipe Izin"
                            : "Tambah Ref Tipe Izin"}
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <Form>
                        <Row className="mb-3">
                            <Col md={12} className="mt-3">
                                <Form.Group>
                                    <Form.Label>Tipe Izin</Form.Label>
                                    <Form.Control
                                        type="text"
                                        value={data.name}
                                        placeholder="Masukkan Tipe Izin"
                                        onChange={(e) =>
                                            setData("name", e.target.value)
                                        }
                                        isInvalid={!!errors.name}
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.name}
                                    </Form.Control.Feedback>
                                </Form.Group>
                            </Col>
                        </Row>
                    </Form>
                </Modal.Body>

                <Modal.Footer>
                    <Button
                        variant="secondary"
                        onClick={() => setShowModal(false)}
                    >
                        Batal
                    </Button>
                    <Button
                        variant="success"
                        onClick={handleSubmit}
                        disabled={processing}
                    >
                        {processing ? "Menyimpan..." : "Simpan"}
                    </Button>
                </Modal.Footer>
            </Modal>
        </AppLayout>
    );
}