import React, { useState } from "react";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Select from "react-select";
import { router } from "@inertiajs/react";
import { Perusahaan, JenisKegiatan } from "@/types/perusahaan";

type ModalIzinLingkunganProps = {
    open: boolean;
    onClose: () => void;
    onSuccess: () => void;
    selectedPerusahaan: Perusahaan | null;
    jenisKegiatan: JenisKegiatan[]; // Ganti dari jenisDokIL menjadi jenisKegiatan
};

export function ModalIzinLingkungan({
    open,
    onClose,
    onSuccess,
    selectedPerusahaan,
    jenisKegiatan,
}: ModalIzinLingkunganProps) {
    if (!selectedPerusahaan) return null;

    // State untuk field Nomor & Tanggal Izin Lingkungan (contoh)
    const [nomorIzin, setNomorIzin] = useState(
        selectedPerusahaan.ILNomor || ""
    );
    const [tanggalIzin, setTanggalIzin] = useState(
        selectedPerusahaan.ILTanggal
            ? new Date(selectedPerusahaan.ILTanggal).toISOString().split("T")[0]
            : ""
    );
    const [dokumen, setDokumen] = useState<File | null>(null);

    // State untuk dropdown Jenis Kegiatan
    // Jika perusahaan sudah memiliki jenis_kegiatan, kita set default-nya
    const [selectedJenisKegiatan, setSelectedJenisKegiatan] = useState<{
        value: number;
        label: string;
    } | null>(
        selectedPerusahaan.jenis_kegiatan
            ? {
                  value: selectedPerusahaan.jenis_kegiatan.JenisKegiatanId,
                  label: selectedPerusahaan.jenis_kegiatan.NamaJenisKegiatan,
              }
            : null
    );

    // Konversi data jenisKegiatan agar bisa dibaca oleh react-select
    const jenisKegiatanOptions = jenisKegiatan.map((jk) => ({
        value: jk.JenisKegiatanId,
        label: jk.NamaJenisKegiatan,
    }));

    // Handler submit form
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (!selectedPerusahaan) return;

        // Siapkan FormData untuk dikirim via Inertia
        const formData = new FormData();
        formData.append(
            "PerusahaanId",
            String(selectedPerusahaan.PerusahaanId)
        );
        formData.append("ILNomor", nomorIzin);
        formData.append("ILTanggal", tanggalIzin);
        // Ganti JenisDokILId -> JenisKegiatanId (sesuaikan dengan field di DB)
        formData.append(
            "JenisKegiatanId",
            selectedJenisKegiatan?.value.toString() || ""
        );
        if (dokumen) {
            formData.append("ILDokumen", dokumen);
        }

        router.post(
            `/admin/perizinan_lingkungan/${selectedPerusahaan.PerusahaanId}`,
            formData,
            {
                onSuccess: () => {
                    onSuccess(); // menutup modal & refresh data
                },
            }
        );
    };

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle>Perizinan Lingkungan</DialogTitle>
                </DialogHeader>

                {/* Detail perusahaan */}
                <div className="mb-4 p-4 bg-blue-100 rounded-md border border-gray-200">
                    <div className="grid grid-cols-2 gap-2 text-sm">
                        <div className="font-bold">No Induk:</div>
                        <div>{selectedPerusahaan.NomorInduk || "-"}</div>

                        <div className="font-bold">Perusahaan:</div>
                        <div>{selectedPerusahaan.NamaPerusahaan || "-"}</div>

                        <div className="font-bold">Jenis Kegiatan:</div>
                        <div>
                            {selectedPerusahaan.jenis_kegiatan
                                ?.NamaJenisKegiatan || "-"}
                        </div>

                        <div className="font-bold">Alamat:</div>
                        <div>{selectedPerusahaan.Alamat || "-"}</div>

                        <div className="font-bold">Telepon:</div>
                        <div>{selectedPerusahaan.Telepon || "-"}</div>

                        <div className="font-bold">Fax:</div>
                        <div>{selectedPerusahaan.Fax || "-"}</div>

                        <div className="font-bold">Email:</div>
                        <div>{selectedPerusahaan.Email || "-"}</div>
                    </div>
                </div>

                {/* Form update dokumen izin */}
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                        <label className="block text-sm font-medium text-gray-700">
                            Nomor Izin Lingkungan
                        </label>
                        <Input
                            type="text"
                            value={nomorIzin}
                            onChange={(e) => setNomorIzin(e.target.value)}
                        />
                    </div>

                    <div className="space-y-2">
                        <label className="block text-sm font-medium text-gray-700">
                            Tanggal Izin
                        </label>
                        <Input
                            type="date"
                            value={tanggalIzin}
                            onChange={(e) => setTanggalIzin(e.target.value)}
                        />
                    </div>

                    <div className="space-y-2">
                        <label className="block text-sm font-medium text-gray-700">
                            Jenis Kegiatan
                        </label>
                        <Select
                            options={jenisKegiatanOptions}
                            value={selectedJenisKegiatan}
                            onChange={setSelectedJenisKegiatan}
                            placeholder="Pilih Jenis Kegiatan"
                            isClearable
                            isSearchable
                        />
                    </div>

                    <div className="space-y-2">
                        <label className="block text-sm font-medium text-gray-700">
                            Upload Dokumen
                        </label>
                        <Input
                            type="file"
                            onChange={(e) => {
                                if (
                                    e.target.files &&
                                    e.target.files.length > 0
                                ) {
                                    setDokumen(e.target.files[0]);
                                }
                            }}
                        />
                    </div>

                    {selectedPerusahaan.ILDokumen && (
                        <div className="mb-4">
                            <Button
                                className="bg-green-100"
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() =>
                                    window.open(
                                        `/storage/${selectedPerusahaan.ILDokumen}`,
                                        "_blank"
                                    )
                                }
                            >
                                Lihat File saat ini
                            </Button>
                        </div>
                    )}

                    <div className="flex justify-end mt-6">
                        <Button
                            variant="outline"
                            onClick={onClose}
                            className="mr-2"
                        >
                            Batal
                        </Button>
                        <Button
                            type="submit"
                            className="bg-green-600 text-white"
                        >
                            Simpan
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}