import React, { useState } from "react";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head } from "@inertiajs/react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import FilterPerizinanLingkungan from "@/components/PerizinanLingkungan/FilterPencarian";
import { Perusahaan, JenisDokIL, JenisKegiatan } from "@/types/perusahaan";
import { FileText } from "lucide-react";
import { ModalIzinLingkungan } from "@/components/PerizinanLingkungan/ModalIzinLingkungan";

type PerizinanLingkunganIndexProps = {
    perusahaan: Perusahaan[];
    jenisDokIL: JenisDokIL[];
    jenisKegiatan: JenisKegiatan[];
};

export default function PerizinanLingkunganIndex({
    perusahaan,
    jenisDokIL,
    jenisKegiatan,
}: PerizinanLingkunganIndexProps) {
    const [selectedPerusahaan, setSelectedPerusahaan] =
        useState<Perusahaan | null>(null);
    const [showModal, setShowModal] = useState(false);

    // Handler ketika klik kolom "Jenis Izin"
    const handleJenisIzinClick = (p: Perusahaan) => {
        setSelectedPerusahaan(p);
        setShowModal(true);
    };

    const handleModalClose = () => {
        setShowModal(false);
        setSelectedPerusahaan(null);
    };

    // Callback jika upload dokumen sukses, maka reload atau refresh data
    const handleUploadSuccess = () => {
        setShowModal(false);
        setSelectedPerusahaan(null);
        // contoh reload:
        // window.location.reload();
        // atau bisa panggil inertia visit:
        // router.reload();
    };

    // State untuk data yang ditampilkan pada tabel
    const [filteredPerusahaan, setFilteredPerusahaan] =
        useState<Perusahaan[]>(perusahaan);

    // Callback dari FilterPerizinanLingkungan
    const handleSearch = (filters: {
        selectedPerusahaan: { value: string; label: string } | null;
        selectedJenisKegiatan: { value: string; label: string } | null;
        Alamat: string;
        TeleponFax: string;
        Email: string;
        selectedJenisIzin: { value: string; label: string } | null;
        ILNomor: string;
        ILTanggal: string | null;
    }) => {
        let result = [...perusahaan];

        if (filters.selectedPerusahaan) {
            result = result.filter(
                (p) =>
                    p.PerusahaanId.toString() ===
                    filters.selectedPerusahaan?.value
            );
        }
        if (filters.selectedJenisKegiatan) {
            result = result.filter(
                (p) =>
                    p.JenisKegiatanId?.toString() ===
                    filters.selectedJenisKegiatan?.value
            );
        }
        if (filters.Alamat.trim() !== "") {
            result = result.filter((p) =>
                p.Alamat?.toLowerCase().includes(filters.Alamat.toLowerCase())
            );
        }
        if (filters.TeleponFax.trim() !== "") {
            result = result.filter((p) => {
                const telMatch = p.Telepon?.toLowerCase().includes(
                    filters.TeleponFax.toLowerCase()
                );
                const faxMatch = p.Fax?.toLowerCase().includes(
                    filters.TeleponFax.toLowerCase()
                );
                return telMatch || faxMatch;
            });
        }
        if (filters.Email.trim() !== "") {
            result = result.filter((p) =>
                p.Email?.toLowerCase().includes(filters.Email.toLowerCase())
            );
        }
        if (filters.selectedJenisIzin) {
            result = result.filter(
                (p) =>
                    p.JenisDokILId?.toString() ===
                    filters.selectedJenisIzin?.value
            );
        }
        if (filters.ILNomor.trim() !== "") {
            result = result.filter((p) =>
                p.ILNomor?.toLowerCase().includes(filters.ILNomor.toLowerCase())
            );
        }
        if (filters.ILTanggal) {
            // Asumsikan format filter "yyyy-MM-dd" atau "yyyy-MM-dd - yyyy-MM-dd"
            if (filters.ILTanggal.includes(" - ")) {
                const [from, to] = filters.ILTanggal.split(" - ");
                result = result.filter((p) => {
                    if (!p.ILTanggal) return false;
                    const itemDate = format(
                        new Date(p.ILTanggal),
                        "yyyy-MM-dd"
                    );
                    return itemDate >= from && itemDate <= to;
                });
            } else {
                result = result.filter((p) => {
                    if (!p.ILTanggal) return false;
                    const itemDate = format(
                        new Date(p.ILTanggal),
                        "yyyy-MM-dd"
                    );
                    return itemDate === filters.ILTanggal;
                });
            }
        }

        setFilteredPerusahaan(result);
    };

    return (
        <AuthenticatedLayout header="Perizinan Lingkungan">
            <Head title="Perizinan Lingkungan" />

            <ModalIzinLingkungan
                open={showModal}
                onClose={handleModalClose}
                onSuccess={handleUploadSuccess}
                selectedPerusahaan={selectedPerusahaan}
                // jenisDokIL={jenisDokIL}
                jenisKegiatan={jenisKegiatan}
            />

            {/* Komponen Filter */}
            <FilterPerizinanLingkungan
                perusahaan={perusahaan}
                jenisDokIL={jenisDokIL}
                jenisKegiatan={jenisKegiatan}
                izinLingkungan={[]} // bisa dihilangkan jika filtering dilakukan pada data perusahaan
                onSearch={handleSearch}
            />

            {/* Tabel Data */}
            <div className="w-full overflow-x-auto">
                <Table className="min-w-[900px] border-collapse">
                    <TableHeader>
                        <TableRow className="border-b bg-green-800">
                            <TableHead className="text-white text-center border-r w-16">
                                No.
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Nama Perusahaan
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Jenis Kegiatan
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Alamat
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Telepon / Fax
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Email
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Jenis Izin
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Nomor Izin
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Tanggal Izin
                            </TableHead>
                            <TableHead className="text-white text-center border-r">
                                Dok
                            </TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {filteredPerusahaan.length === 0 ? (
                            <TableRow>
                                <TableCell
                                    colSpan={9}
                                    className="text-center py-4"
                                >
                                    Tidak ada data
                                </TableCell>
                            </TableRow>
                        ) : (
                            filteredPerusahaan.map((p, index) => (
                                <TableRow
                                    key={p.PerusahaanId}
                                    className="border-b"
                                >
                                    <TableCell className="text-center border-r">
                                        {index + 1}
                                    </TableCell>
                                    <TableCell className="border-r">
                                        {p.NamaPerusahaan || "N/A"}
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.jenis_kegiatan?.NamaJenisKegiatan ||
                                            "N/A"}
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.Alamat || "N/A"}
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.Telepon || "N/A"} / {p.Fax || "N/A"}
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.Email || "N/A"}
                                    </TableCell>
                                    {/* <TableCell className="text-center border-r">
                                        {p.jenis_dok_i_l?.NamaJenisDokIL ||
                                            "N/A"}
                                    </TableCell> */}
                                    <TableCell className="border-r text-center">
                                        <button
                                            className="text-blue-600 hover:underline"
                                            onClick={() =>
                                                handleJenisIzinClick(p)
                                            }
                                        >
                                            {p.jenis_dok_i_l?.NamaJenisDokIL ??
                                                "Klik di sini"}
                                        </button>
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.ILNomor || "-"}
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.ILTanggal
                                            ? new Date(
                                                  p.ILTanggal
                                              ).toLocaleDateString("en-GB")
                                            : "-"}
                                    </TableCell>
                                    <TableCell className="text-center border-r">
                                        {p.ILDokumen ? (
                                            <a
                                                href={`/storage/${p.ILDokumen}`}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="flex items-center justify-center"
                                            >
                                                <FileText className="w-4 h-4 text-green-600 hover:text-green-800" />
                                            </a>
                                        ) : (
                                            "-"
                                        )}
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>
        </AuthenticatedLayout>
    );
}