import { router, useForm } from "@inertiajs/react";
import { useState, useMemo, useCallback, ReactNode } from "react";
import { Button, Form, Modal, Row, Col, Dropdown } from "react-bootstrap";
import { MdAdd, MdMoreHoriz, MdEdit, MdDelete } 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 { MySwalTheme } from "@/layouts/app-layout";
import AppPagination from "@/components/app-pagination";
import EmptyData from "@/components/empty-data";
import { useExpanding } from "@/hooks/use-expanding";
import { useSearch } from "@/hooks/use-search";
import { CellContext } from "@tanstack/react-table";
import { RefSKPDKode } from "@/types/ref-skpd";
import RefSKPDController from "@/actions/App/Http/Controllers/Master/RefSKPDController";

interface RefSkpdKodeForm {
    skpd_id: string;
    kode: string;
    name: string;
    address: string;
    telp: string;
    fax: string;
    email: string;
    website: string;
}

export default function TabSkpdKode({ resource }: any) {
    if (!resource) {
        return <div className="p-3 text-center">Loading Data...</div>;
    }
    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<RefSkpdKodeForm>({
            skpd_id: "",
            kode: "",
            name: "",
            address: "",
            telp: "",
            fax: "",
            email: "",
            website: "",
        });

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

    // Search functionality
    const { searchValue, handleSearch } = useSearch({
        initialValue: params.k_search || "",
        onSearch: useCallback(
            (value) => {
                setParams({ k_search: value.trim() || undefined, k_page: 1 });
            },
            [setParams],
        ),
    });
    const handleSort = useCallback(
        (columnId: string) => {
            const isDesc =
                params.k_sort === columnId && params.k_order === "desc";
            setParams({ k_sort: columnId, k_order: isDesc ? "asc" : "desc" });
        },
        [params, setParams],
    );

    // Pagination khusus Kode
    const handlePageChange = useCallback(
        (page: number) => {
            setParams({ k_page: page });
        },
        [setParams],
    );
    const handlePerPageChange = useCallback(
        (perPage: number) => setParams({ k_per_page: perPage }),
        [setParams],
    );

    const handleOpenModal = (item: any = null) => {
        if (item && item.id) {
            setSelected(item);
            setData({
                skpd_id: item.skpd_id || "",
                kode: item.kode || "",
                name: item.name || "",
                address: item.address || "",
                telp: item.telp || "",
                fax: item.fax || "",
                email: item.email || "",
                website: item.website || "",
            });
        } else {
            setSelected(null);
            reset();
        }
        clearErrors();
        setShowModal(true);
    };

    const handleDelete = useCallback((item: RefSKPDKode) => {
        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(
                    RefSKPDController.destroyKode.url(item.id),
                    {
                        preserveScroll: true,
                        onSuccess: () => {
                            MySwalTheme.fire({
                                icon: "success",
                                title: "Berhasil",
                                text: "Data Ref SKPD Kode berhasil dihapus",
                                timer: 1500,
                                showConfirmButton: false,
                            });
                            router.reload({ only: ["resource"] });
                        },
                    },
                );
            }
        });
    }, []);
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        const isEdit = selected !== null && selected.id !== undefined;

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

        const action = isEdit ? put : post;

        action(url, {
            preserveScroll: true,
            onSuccess: () => {
                setShowModal(false);
                reset();
                setSelected(null);
                MySwalTheme.fire(
                    "Berhasil",
                    isEdit
                        ? "Data berhasil diperbarui"
                        : "Data berhasil disimpan",
                    "success",
                );
                router.get(window.location.pathname, params, {
                    preserveScroll: true,
                    only: ["resourceKode"],
                });
            },
        });
    };
    const columns = useMemo(
        () => [
            {
                accessorKey: "skpd_id",
                id: "skpd_id",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">SKPD ID</div>,
            },
            {
                accessorKey: "kode",
                id: "kode",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Kode</div>,
            },
            {
                accessorKey: "name",
                id: "name",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Nama</div>,
            },
            {
                accessorKey: "address",
                id: "address",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Alamat</div>,
            },
            {
                accessorKey: "telp",
                id: "telp",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Telp</div>,
            },
            {
                accessorKey: "fax",
                id: "fax",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Fax</div>,
            },
            {
                accessorKey: "email",
                id: "email",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Email</div>,
            },
            {
                accessorKey: "website",
                id: "website",
                enableSorting: true,
                cell: (info: CellContext<RefSKPDKode, ReactNode>) => (
                    <div className="text-start small">{info.getValue()}</div>
                ),
                header: () => <div className="text-start">Website</div>,
            },
            {
                id: "actions",
                header: "Actions",
                size: 80,
                enableSorting: false,
                cell: (info: CellContext<RefSKPDKode, 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.k_search || ""}-${params.k_sort || ""}-${params.k_order || ""}`;
    }, [
        resource.meta.total,
        resource.meta.current_page,
        params.k_search,
        params.k_sort,
        params.k_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.k_sort, // Map k_sort ke sort agar hook useDataTable paham
            order: params.k_order,
            search: params.k_search,
        },
        onSort: handleSort,
        onPageChange: handlePageChange,
        onPerPageChange: (val) => setParams({ k_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.k_sort,
                    order: params.k_order,
                    per_page: params.k_per_page,
                }}
                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)}
                size="lg"
                centered
            >
                <Form onSubmit={handleSubmit}>
                    <Modal.Header closeButton>
                        <Modal.Title>
                            {selected ? "Edit" : "Tambah"} Kode SKPD
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Row>
                            <Col md={2} className="mb-3">
                                <Form.Label>SKPD ID</Form.Label>
                                <Form.Control
                                    value={data.skpd_id}
                                    onChange={(e) =>
                                        setData("skpd_id", e.target.value)
                                    }
                                    isInvalid={!!errors.skpd_id}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errors.skpd_id}
                                </Form.Control.Feedback>
                            </Col>
                            <Col md={2} className="mb-3">
                                <Form.Label>Kode SKPD</Form.Label>
                                <Form.Control
                                    value={data.kode}
                                    onChange={(e) =>
                                        setData("kode", e.target.value)
                                    }
                                    isInvalid={!!errors.kode}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errors.kode}
                                </Form.Control.Feedback>
                            </Col>
                            <Col md={8} className="mb-3">
                                <Form.Label>Nama SKPD</Form.Label>
                                <Form.Control
                                    value={data.name}
                                    onChange={(e) =>
                                        setData("name", e.target.value)
                                    }
                                    isInvalid={!!errors.name}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errors.name}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                        <Form.Group className="mb-3">
                            <Form.Label>Address</Form.Label>
                            <Form.Control
                                type="text"
                                value={data.address}
                                onChange={(e) =>
                                    setData("address", e.target.value)
                                }
                                isInvalid={!!errors.address}
                            />
                            <Form.Control.Feedback type="invalid">
                                {errors.address}
                            </Form.Control.Feedback>
                        </Form.Group>
                        <Row>
                            <Col md={6} className="mb-3">
                                <Form.Group className="mb-3">
                                    <Form.Label>Telp</Form.Label>
                                    <Form.Control
                                        value={data.telp}
                                        onChange={(e) =>
                                            setData("telp", e.target.value)
                                        }
                                        isInvalid={!!errors.telp}
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.telp}
                                    </Form.Control.Feedback>
                                </Form.Group>
                            </Col>
                            <Col md={6}>
                                <Form.Group className="mb-3">
                                    <Form.Label>Fax</Form.Label>
                                    <Form.Control
                                        value={data.fax}
                                        onChange={(e) =>
                                            setData("fax", e.target.value)
                                        }
                                        isInvalid={!!errors.fax}
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.fax}
                                    </Form.Control.Feedback>
                                </Form.Group>
                            </Col>
                        </Row>
                        <Row>
                            <Col md={6} className="mb-3">
                                <Form.Group className="mb-3">
                                    <Form.Label>Website</Form.Label>
                                    <Form.Control
                                        type="text"
                                        value={data.website}
                                        onChange={(e) =>
                                            setData("website", e.target.value)
                                        }
                                        isInvalid={!!errors.website}
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.email}
                                    </Form.Control.Feedback>
                                </Form.Group>
                            </Col>
                            <Col md={6}>
                                <Form.Group className="mb-3">
                                    <Form.Label>Email</Form.Label>
                                    <Form.Control
                                        type="email"
                                        value={data.email}
                                        onChange={(e) =>
                                            setData("email", e.target.value)
                                        }
                                        isInvalid={!!errors.email}
                                    />
                                    <Form.Control.Feedback type="invalid">
                                        {errors.email}
                                    </Form.Control.Feedback>
                                </Form.Group>
                            </Col>
                        </Row>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button
                            variant="secondary"
                            onClick={() => setShowModal(false)}
                        >
                            Batal
                        </Button>
                        <Button
                            variant="success"
                            type="submit"
                            disabled={processing}
                        >
                            {processing ? "Menyimpan..." : "Simpan"}
                        </Button>
                    </Modal.Footer>
                </Form>
            </Modal>
        </>
    );
}