import { router, useForm } from "@inertiajs/react";
import { useState, useMemo, useCallback, ReactNode } from "react";
import { Button, Form, Modal, Dropdown } from "react-bootstrap";
import { MdAdd, MdMoreHoriz, MdEdit } from "react-icons/md";
import DataTable from "@/components/data-table";
import { useDataTable } from "@/hooks/use-data-table";
import { useQueryParams } from "@/hooks/use-query-params";
import Select from "react-select";
import { MySwalTheme } from "@/layouts/app-layout";
import AppPagination from "@/components/app-pagination";
import { useSearch } from "@/hooks/use-search";
import { useExpanding } from "@/hooks/use-expanding";
import { CellContext } from "@tanstack/react-table";
import { RefSKPD } from "@/types/ref-skpd";
import RefSKPDController from "@/actions/App/Http/Controllers/Master/RefSKPDController";
import EmptyData from "@/components/empty-data";
import useReactSelectTheme from "@/hooks/use-react-select";

interface RefSkpdForm {
    skpd_id: number | null;
    nama: string;
    pid: string;
}

export default function TabSkpdStruktur({ resource, skpdOptions }: any) {
    if (!resource) {
        return <div className="p-3 text-center">Loading Data...</div>;
    }
    const theme = useReactSelectTheme();
    const [params, setParams] = useQueryParams();
    const [showModal, setShowModal] = useState(false);
    const [selected, setSelected] = useState<any>(null);

    const { data, setData, post, put, processing, errors, reset, clearErrors } =
        useForm<RefSkpdForm>({
            skpd_id: null as any,
            nama: "",
            pid: "",
        });

    const { toggleExpanded, isExpanded } = useExpanding({
        multipleExpansion: true,
    });

    const { searchValue, handleSearch } = useSearch({
        initialValue: params.s_search || "",
        onSearch: useCallback(
            (value) => {
                setParams({ s_search: value.trim() || undefined, s_page: 1 });
            },
            [setParams],
        ),
    });

    const handleSort = useCallback(
        (columnId: string) => {
            const isDesc =
                params.s_sort === columnId && params.s_order === "desc";
            setParams({ s_sort: columnId, s_order: isDesc ? "asc" : "desc" });
        },
        [params, setParams],
    );

    const handlePageChange = useCallback(
        (page: number) => {
            setParams({ s_page: page });
        },
        [setParams],
    );
    const handlePerPageChange = useCallback(
        (perPage: number) => setParams({ s_per_page: perPage }),
        [setParams],
    );

    const handleOpenModal = (item: any = null) => {
        if (item && item.id) {
            setSelected(item);
            setData({
                skpd_id: item.skpd_id || "",
                nama: item.nama || "",
                pid: item.pid || "",
            });
        } else {
            setSelected(null);
            reset();
        }
        clearErrors();
        setShowModal(true);
    };

    const handleDelete = useCallback((item: RefSKPD) => {
        MySwalTheme.fire({
            title: "Are you sure?",
            html: `Data <b>"${item.nama}"</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(
                    RefSKPDController.destroyStruktur.url(item.id),
                    {
                        preserveScroll: true,
                        onSuccess: () => {
                            MySwalTheme.fire({
                                icon: "success",
                                title: "Berhasil",
                                text: "Data Ref SKPD berhasil dihapus",
                                timer: 1500,
                                showConfirmButton: false,
                            });
                            router.reload({ only: ["resource"] });
                        },
                    },
                );
            }
        });
    }, []);
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        // Cek apakah selected ada DAN punya ID (untuk edit)
        const isEdit = selected !== null && selected.id !== undefined;

        const url = isEdit
            ? `/ref-skpd/struktur/${selected.id}/update`
            : "/ref-skpd/struktur/store";

        const action = isEdit ? put : post;

        action(url, {
            preserveScroll: true,
            onSuccess: () => {
                setShowModal(false);
                reset();
                setSelected(null); // Reset state setelah berhasil
                MySwalTheme.fire(
                    "Berhasil",
                    isEdit
                        ? "Data berhasil diperbarui"
                        : "Data berhasil disimpan",
                    "success",
                );
                router.get(window.location.pathname, params, {
                    preserveScroll: true,
                    only: ["resourceStruktur"],
                });
            },
        });
    };
    const columns = useMemo(
        () => [
            {
                accessorKey: "skpd_id",
                id: "skpd_id",
                enableSorting: true,
                cell: (info: CellContext<RefSKPD, ReactNode>) => (
                    <div className="text-start">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">SKPD ID</div>,
            },
            {
                accessorKey: "skpd_kode.name",
                id: "skpd_kode.name",
                enableSorting: true,
                cell: (info: CellContext<RefSKPD, ReactNode>) => (
                    <div className="text-start">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">SKPD</div>,
            },
            {
                accessorKey: "pid",
                id: "pid",
                enableSorting: true,
                cell: (info: CellContext<RefSKPD, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">PID</div>,
            },
            {
                accessorKey: "nama",
                id: "nama",
                enableSorting: true,
                cell: (info: CellContext<RefSKPD, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Nama</div>,
            },
            {
                id: "actions",
                header: "Actions",
                size: 80,
                enableSorting: false,
                cell: (info: CellContext<RefSKPD, 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={() =>
                                    handleOpenModal(info.row.original)
                                }
                                role="button"
                            >
                                Edit
                            </Dropdown.Item>
                            <Dropdown.Item
                                onClick={() => handleDelete(info.row.original)}
                            >
                                Delete
                            </Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                ),
            },
        ],
        [
            handleOpenModal,
            handleDelete,
            resource.data,
            toggleExpanded,
            isExpanded,
        ],
    );

    // Data table setup - dengan key yang reactive untuk memaksa re-render
    const tableKey = useMemo(() => {
        return `${resource.meta.total}-${resource.meta.current_page}-${params.s_search || ""}-${params.s_sort || ""}-${params.s_order || ""}`;
    }, [
        resource.meta.total,
        resource.meta.current_page,
        params.s_search,
        params.s_sort,
        params.s_order,
    ]);
    const { table } = useDataTable({
        data: resource.data || [],
        columns,
        pageCount: resource.meta?.last_page || 1,
        currentPage: resource.meta?.current_page || 1,
        pageSize: resource.meta?.per_page || 15,
        params: {
            sort: params.s_sort, // Map s_sort ke sort agar hook useDataTable paham
            order: params.s_order,
            search: params.s_search,
        },
        onSort: handleSort,
        onPageChange: handlePageChange,
        onPerPageChange: (val) => setParams({ s_per_page: val, k_page: 1 }),
    });

    return (
        <>
            <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={() => handleOpenModal()}
                    >
                        <MdAdd />
                        <span>Tambah</span>
                    </Button>
                </div>
            </div>
            <DataTable
                key={tableKey}
                table={table}
                params={{ sort: params.s_sort, order: params.s_order }}
                onSort={handleSort}
                defaultSortColumn="tgl"
                isExpanded={isExpanded}
            />

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

            <AppPagination
                meta={resource.meta}
                onPageChange={handlePageChange}
                onPerPageChange={handlePerPageChange}
            />
            <Modal show={showModal} onHide={() => setShowModal(false)} centered>
                <Form onSubmit={handleSubmit}>
                    <Modal.Header closeButton>
                        <Modal.Title>
                            {selected ? "Edit" : "Tambah"} Struktur
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form.Group className="mb-3">
                            <Form.Label>Pilih Unit Kerja (SKPD)</Form.Label>
                            <Select
                                options={skpdOptions}
                                value={skpdOptions.find(
                                    (opt: any) => opt.value === data.skpd_id,
                                )}
                                onChange={(opt: any) =>
                                    setData("skpd_id", opt ? opt.value : null)
                                }
                                placeholder="Cari Kode atau Nama SKPD..."
                                isClearable
                                styles={theme}
                            />
                            {Boolean(errors.skpd_id) && (
                                <div className="text-danger small mt-1">
                                    {String(errors.skpd_id)}
                                </div>
                            )}
                        </Form.Group>

                        <Form.Group className="mb-3">
                            <Form.Label>PID</Form.Label>
                            <Form.Control
                                value={data.pid}
                                onChange={(e) => setData("pid", e.target.value)}
                                isInvalid={!!errors.pid}
                                placeholder="Masukkan PID..."
                            />
                            <Form.Control.Feedback type="invalid">
                                {errors.pid}
                            </Form.Control.Feedback>
                        </Form.Group>

                        <Form.Group className="mb-3">
                            <Form.Label>Nama Struktur / Jabatan</Form.Label>
                            <Form.Control
                                value={data.nama}
                                onChange={(e) =>
                                    setData("nama", e.target.value)
                                }
                                isInvalid={!!errors.nama}
                                placeholder="Masukkan nama jabatan..."
                            />
                            <Form.Control.Feedback type="invalid">
                                {errors.nama}
                            </Form.Control.Feedback>
                        </Form.Group>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button
                            variant="secondary"
                            onClick={() => setShowModal(false)}
                        >
                            Batal
                        </Button>
                        <Button
                            variant="primary"
                            type="submit"
                            disabled={processing}
                        >
                            {processing ? "Menyimpan..." : "Simpan Struktur"}
                        </Button>
                    </Modal.Footer>
                </Form>
            </Modal>
        </>
    );
}