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 AppLayout from "@/layouts/app-layout";
import { Head, usePage } from "@inertiajs/react";
import { useMemo, useCallback, useState } from "react";
import { Button, Container, Form } from "react-bootstrap";
import PageHeader from "@/components/page-header";
import { SharedData } from "@/types";
import { MdDownload } from "react-icons/md";

export default function LaporanAbsensiPage({ title, resource }: any) {
    const [params, setParams] = useQueryParams();

    // Di dalam komponen LaporanAbsensiPage
    const now = new Date();
    const currentMonth = String(now.getMonth() + 1).padStart(2, "0");
    const currentYear = String(now.getFullYear());

    const [monthFilter, setMonthFilter] = useState(
        params.month || currentMonth,
    );
    const [yearFilter, setYearFilter] = useState(params.year || currentYear);

    // Daftar nama bulan untuk dropdown
    const months = [
        { value: "01", label: "Januari" },
        { value: "02", label: "Februari" },
        { value: "03", label: "Maret" },
        { value: "04", label: "April" },
        { value: "05", label: "Mei" },
        { value: "06", label: "Juni" },
        { value: "07", label: "Juli" },
        { value: "08", label: "Agustus" },
        { value: "09", label: "September" },
        { value: "10", label: "Oktober" },
        { value: "11", label: "November" },
        { value: "12", label: "Desember" },
    ];

    // Daftar tahun (misal: 5 tahun terakhir)
    const years = Array.from({ length: 5 }, (_, i) =>
        String(now.getFullYear() - i),
    );

    const daysInRange = useMemo(() => {
        const month = parseInt(monthFilter);
        const year = parseInt(yearFilter);
        // Mendapatkan jumlah hari dalam bulan tertentu
        const daysInMonth = new Date(year, month, 0).getDate();

        return Array.from({ length: daysInMonth }, (_, i) => i + 1);
    }, [monthFilter, yearFilter]);

    const handleApplyFilter = () => {
        setParams({
            ...params,
            month: monthFilter,
            year: yearFilter,
            page: 1,
        });
    };

    const handleResetFilter = () => {
        setMonthFilter(currentMonth);
        setYearFilter(currentYear);
        setParams({
            ...params,
            month: currentMonth,
            year: currentYear,
            page: 1,
        });
    };

    // Search functionality
    const { searchValue, handleSearch } = useSearch({
        initialValue: params.search || "",
        onSearch: useCallback(
            (value: string) => {
                setParams({ search: value.trim() || undefined, page: 1 });
            },
            [setParams],
        ),
        debounceMs: 500,
    });

    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],
    );

    const columns = useMemo(
        () => [
            {
                id: "rowNumber",
                header: () => <div className="text-center">No</div>,
                cell: (info: any) => {
                    // Gunakan data langsung dari resource meta agar akurat
                    const page = resource.meta.current_page;
                    const perPage = resource.meta.per_page;
                    return (
                        <div className="text-center">
                            {(page - 1) * perPage + info.row.index + 1}
                        </div>
                    );
                },
            },
            { accessorKey: "nip", header: "NIP" },
            {
                accessorKey: "name",
                header: "Nama",
                cell: (info: any) => (
                    <div
                        className="fw-bold small text-wrap"
                        style={{ width: "150px" }}
                    >
                        {info.getValue()}
                    </div>
                ),
            },
            {
                accessorKey: "skpd_name",
                header: "SKPD",
                cell: (info: any) => (
                    <div
                        className="fw-bold small text-wrap"
                        style={{ width: "150px" }}
                    >
                        {info.getValue()}
                    </div>
                ),
            },
            // Kolom Tanggal Dinamis
            ...daysInRange.map((day) => ({
                id: `day_${day}`,
                header: () => <div className="text-center">{day}</div>,
                cell: (info: any) => {
                    const data = info.row.original.attendance_data?.[day];
                    if (!data)
                        return <div className="text-center text-muted">-</div>;

                    if (data.is_khusus) {
                        return (
                            <div
                                className="d-flex align-items-center justify-content-center text-center fw-bold px-1"
                                style={{
                                    backgroundColor: "#a3d8d4",
                                    fontSize: "9px",
                                    minHeight: "50px",
                                    margin: "-12px -8px",
                                }}
                            >
                                {data.keterangan}
                            </div>
                        );
                    }
                    return (
                        <div
                            className="text-center small"
                            style={{ lineHeight: "1.1" }}
                        >
                            <div
                                className={
                                    data.status_masuk === "Terlambat"
                                        ? "text-danger"
                                        : ""
                                }
                            >
                                {data.masuk || "-"}
                            </div>
                            <div
                                className={
                                    data.status_pulang === "Pulang Cepat"
                                        ? "text-danger"
                                        : ""
                                }
                            >
                                {data.pulang || "-"}
                            </div>
                        </div>
                    );
                },
            })),
            {
                accessorKey: "total_akumulasi",
                header: "Total Akumulasi (Tahun/Bulan)",
                cell: (info: any) => (
                    <div className="text-center">
                        {info.getValue() || "00:00:00 / 00:00:00"}
                    </div>
                ),
            },
        ],
        [daysInRange, resource.data],
    );

    const tableKey = useMemo(() => {
        // Tambahkan params.page dan params.per_page di sini
        return `laporan-${params.page}-${params.per_page}-${params.month}-${params.year}-${params.search || ""}`;
    }, [
        params.page,
        params.per_page,
        params.month,
        params.year,
        params.search,
    ]);

    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: (page) => setParams({ ...params, page }),
        onPerPageChange: (perPage) =>
            setParams({ ...params, per_page: perPage, page: 1 }),
    });

    return (
        <AppLayout>
            <Head title={title} />
            <Container fluid className="p-0">
                <PageHeader title={title} />
                <div className="mb-4 d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3">
                    <div className="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-2 w-100 w-md-auto">
                        {/* Search Input */}
                        <div className="position-relative">
                            <Form.Control
                                type="search"
                                name="search"
                                value={searchValue}
                                onChange={handleSearch}
                                placeholder="Search..."
                                className="w-100"
                                style={{ minWidth: "250px" }}
                            />
                        </div>
                        <div className="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2 p-2">
                            <div className="d-flex align-items-center gap-2">
                                {/* Dropdown Bulan */}
                                <Form.Select
                                    value={monthFilter}
                                    onChange={(e) =>
                                        setMonthFilter(e.target.value)
                                    }
                                    style={{ minWidth: "140px" }}
                                >
                                    {months.map((m) => (
                                        <option key={m.value} value={m.value}>
                                            {m.label}
                                        </option>
                                    ))}
                                </Form.Select>

                                {/* Dropdown Tahun */}
                                <Form.Select
                                    value={yearFilter}
                                    onChange={(e) =>
                                        setYearFilter(e.target.value)
                                    }
                                    style={{ minWidth: "100px" }}
                                >
                                    {years.map((y) => (
                                        <option key={y} value={y}>
                                            {y}
                                        </option>
                                    ))}
                                </Form.Select>
                            </div>

                            <div className="d-flex gap-2">
                                <Button
                                    variant="primary"
                                    onClick={handleApplyFilter}
                                >
                                    Filter
                                </Button>
                                {(params.month || params.year) && (
                                    <Button
                                        variant="outline-secondary"
                                        onClick={handleResetFilter}
                                    >
                                        Reset
                                    </Button>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Tombol Absensi */}
                    <Button
                        size="sm"
                        variant="success"
                        onClick={() =>
                            window.open(
                                route(
                                    "laporan.detail-absensi-export",
                                    params as any,
                                ),
                                "_blank",
                            )
                        }
                    >
                        <MdDownload></MdDownload> Export Excel
                    </Button>
                </div>

                <div className="card shadow-sm">
                    <div className="table-responsive">
                        <DataTable
                            key={tableKey}
                            table={table}
                            onSort={handleSort}
                            params={params}
                        />
                    </div>
                </div>

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

                <AppPagination
                    meta={resource.meta}
                    onPageChange={(page) => setParams({ page })}
                    onPerPageChange={(perPage) =>
                        setParams({ per_page: perPage })
                    }
                />
            </Container>
        </AppLayout>
    );
}