import React, { useEffect, useState } from "react";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head, Link, router, useForm } from "@inertiajs/react";
import Select from "react-select";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";

// Komponen shadcn/ui untuk date range (contoh)
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { Button } from "@/components/ui/button";
import { ArrowLeft, CalendarIcon, Edit, Printer } from "lucide-react";
import { format } from "date-fns";
import { cn } from "@/lib/utils"; // biasanya helper classNames
import { DateRange } from "react-day-picker";
import { FileText } from "lucide-react";
import {
    Perusahaan,
    HistoryKegiatan,
    HistoryPerusahaan as HistoryPerusahaanType,
} from "@/types/perusahaan";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";

type DetailHistoryPerusahaanProps = {
    perusahaan: Perusahaan;
    historyKegiatan: HistoryKegiatan[];
    historyPerusahaan: HistoryPerusahaanType[]; // data existing
};

export default function DetailHistoryPerusahaan({
    perusahaan,
    historyKegiatan,
    historyPerusahaan = [],
}: DetailHistoryPerusahaanProps) {
    const { toast } = useToast();

    useEffect(() => {
        console.log("Isi Data History Perusahaan:", historyPerusahaan);
    }, [historyPerusahaan]);

    // --------------------
    // 1. STATE FILTER
    // --------------------
    // Date range
    const [dateRange, setDateRange] = useState<DateRange | undefined>({
        from: undefined,
        to: undefined,
    });
    // Kelompok Kegiatan
    const [selectedKegiatan, setSelectedKegiatan] = useState<{
        value: string;
        label: string;
    } | null>(null);

    // State data terfilter
    const [filteredData, setFilteredData] =
        useState<HistoryPerusahaanType[]>(historyPerusahaan);

    // Fungsi untuk memproses filter
    function handleFilter() {
        let filtered = [...historyPerusahaan];

        // Filter rentang tanggal
        if (dateRange?.from && dateRange?.to) {
            const fromDay = format(dateRange.from, "yyyy-MM-dd");
            const toDay = format(dateRange.to, "yyyy-MM-dd");

            filtered = filtered.filter((item) => {
                if (!item.TanggalHistory) return false;
                const itemDay = format(
                    new Date(item.TanggalHistory),
                    "yyyy-MM-dd"
                );
                return itemDay >= fromDay && itemDay <= toDay;
            });
        }

        // Filter Kelompok Kegiatan
        if (selectedKegiatan) {
            filtered = filtered.filter(
                (item) =>
                    item.HistoryKegiatanId.toString() === selectedKegiatan.value
            );
        }

        setFilteredData(filtered);
    }

    // Fungsi untuk mereset filter pencarian
    function handleReset() {
        setDateRange({ from: undefined, to: undefined });
        setSelectedKegiatan(null);
        setFilteredData(historyPerusahaan);
    }

    function handleBack() {
        // Misal kembali ke halaman sebelumnya
        window.history.back();
    }

    function handlePrint() {
        // Contoh simpel: memanggil window.print()
        window.print();
    }

    function handleExportPDF() {
        // Contoh panggil route export PDF, atau link ke PDF
        // Misal router.visit(route("pdf.export", { id: 123 }));
        // Atau window.open("/path/to/pdf", "_blank");
        alert("Export PDF belum diimplementasikan.");
    }

    // --------------------
    // 2. STATE FORM TAMBAH HISTORY
    // --------------------
    const [showModal, setShowModal] = useState(false);

    const { data, setData, post, processing, errors, reset } = useForm({
        PerusahaanId: perusahaan.PerusahaanId,
        NomorHistory: "",
        TanggalHistory: "",
        HistoryKegiatanId: "",
        KeteranganHistory: "",
        DokumenHistory: null as File | null,
    });

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        post(route("admin.history_perusahaan.store", perusahaan.PerusahaanId), {
            onSuccess: () => {
                router.visit(window.location.href, { replace: true });
                setShowModal(false);
                reset();
                toast({
                    title: "Sukses",
                    description: "History Perusahaan berhasil ditambahkan",
                    variant: "default",
                });
            },
            onError: (errors) => {
                toast({
                    title: "Error",
                    description: "Gagal menambahkan history perusahaan",
                    variant: "destructive",
                });
            },
        });
    }

    // --------------------
    // 3. STATE & FORM UNTUK EDIT HISTORY
    // --------------------
    const [showEditModal, setShowEditModal] = useState(false);
    const [editingItem, setEditingItem] =
        useState<HistoryPerusahaanType | null>(null);

    const {
        data: editData,
        setData: setEditData,
        post: postEdit,
        processing: editProcessing,
        errors: editErrors,
        reset: resetEditForm,
    } = useForm({
        HistoryPerusahaanId: "",
        PerusahaanId: perusahaan.PerusahaanId,
        NomorHistory: "",
        TanggalHistory: "",
        HistoryKegiatanId: "",
        KeteranganHistory: "",
        DokumenHistory: null as File | null,
    });

    function handleEdit(item: HistoryPerusahaanType) {
        setEditingItem(item);
        setEditData("HistoryPerusahaanId", item.HistoryPerusahaanId);
        setEditData("NomorHistory", item.NomorHistory);
        setEditData("TanggalHistory", item.TanggalHistory);
        setEditData("HistoryKegiatanId", item.HistoryKegiatanId.toString());
        setEditData("KeteranganHistory", item.KeteranganHistory);
        setShowEditModal(true);
    }

    function handleEditSubmit(e: React.FormEvent) {
        e.preventDefault();
        postEdit(
            route(
                "admin.history_perusahaan.update",
                editData.HistoryPerusahaanId
            ),
            {
                onSuccess: () => {
                    router.visit(window.location.href, { replace: true });
                    setShowEditModal(false);
                    resetEditForm();
                    toast({
                        title: "Sukses",
                        description: "History Perusahaan berhasil diperbarui",
                        variant: "default",
                    });
                },
                onError: () => {
                    toast({
                        title: "Error",
                        description: "Gagal memperbarui history perusahaan",
                        variant: "destructive",
                    });
                },
            }
        );
    }

    // --------------------
    // 4. RENDER HALAMAN
    // --------------------
    return (
        <AuthenticatedLayout header="Detail History Perusahaan">
            <Head title="Detail History Perusahaan" />
            <div className="container mx-auto p-4">
                <div className="flex items-center justify-between mb-4">
                    <div>
                        <h2 className="text-lg font-semibold mb-2 text-gray-800">
                            History Perusahaan: {perusahaan.NamaPerusahaan}
                        </h2>
                        <p className="text-sm text-gray-600">
                            Nomor Induk: {perusahaan.NomorInduk || "-"}
                        </p>
                    </div>

                    <div className="flex gap-2">
                        <button
                            onClick={handleBack}
                            className="bg-blue-500 text-white px-2 py-1 rounded-md flex items-center gap-1 hover:bg-blue-600"
                        >
                            <ArrowLeft className="w-4 h-4" />
                            BACK
                        </button>
                        <button
                            onClick={handlePrint}
                            className="bg-blue-500 text-white px-2 py-1 rounded-md flex items-center gap-1 hover:bg-blue-600"
                        >
                            <Printer className="w-4 h-4" />
                            Print
                        </button>
                        <button
                            onClick={handleExportPDF}
                            className="bg-blue-500 text-white px-2 py-1 rounded-md flex items-center gap-1 hover:bg-blue-600"
                        >
                            <FileText className="w-4 h-4" />
                            Export PDF
                        </button>
                    </div>
                </div>
                {/* Bagian Filter */}
                <div className="bg-white py-6 rounded-lg shadow-sm mb-6">
                    <Card className="shadow-md border-slate-200">
                        <CardHeader className="pb-3">
                            <CardTitle className="text-lg font-medium">
                                Pencarian
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {/* Filter Rentang Tanggal */}
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">
                                        Rentang Tanggal
                                    </label>
                                    <Popover>
                                        <PopoverTrigger asChild>
                                            <Button
                                                variant="outline"
                                                className={cn(
                                                    "w-full justify-start text-left font-normal",
                                                    !dateRange?.from &&
                                                        "text-muted-foreground"
                                                )}
                                            >
                                                <CalendarIcon className="mr-2 h-4 w-4" />
                                                {dateRange?.from
                                                    ? dateRange.to
                                                        ? `${format(
                                                              dateRange.from,
                                                              "dd/MM/yyyy"
                                                          )} - ${format(
                                                              dateRange.to,
                                                              "dd/MM/yyyy"
                                                          )}`
                                                        : format(
                                                              dateRange.from,
                                                              "dd/MM/yyyy"
                                                          )
                                                    : "Pilih Tanggal"}
                                            </Button>
                                        </PopoverTrigger>
                                        <PopoverContent
                                            className="w-auto p-0"
                                            align="start"
                                        >
                                            <Calendar
                                                initialFocus
                                                mode="range"
                                                defaultMonth={dateRange?.from}
                                                selected={dateRange}
                                                onSelect={setDateRange}
                                                numberOfMonths={2}
                                            />
                                        </PopoverContent>
                                    </Popover>
                                </div>

                                {/* Filter Kelompok Kegiatan - Using react-select */}
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">
                                        Kelompok Kegiatan
                                    </label>
                                    <Select
                                        className="basic-single"
                                        classNamePrefix="select"
                                        value={selectedKegiatan}
                                        onChange={(option) =>
                                            setSelectedKegiatan(option)
                                        }
                                        options={historyKegiatan.map((hk) => ({
                                            value: hk.HistoryKegiatanId.toString(),
                                            label: hk.NamaHistoryKegiatan,
                                        }))}
                                        isClearable
                                        placeholder="-- Pilih --"
                                    />
                                </div>
                            </div>

                            {/* Tombol Cari */}
                            <div className="mt-4 flex gap-2">
                                <Button
                                    onClick={handleFilter}
                                    className="bg-green-600 hover:bg-green-700 text-white"
                                >
                                    Cari
                                </Button>
                                <Button
                                    onClick={handleReset}
                                    className="bg-gray-600 hover:bg-gray-700 text-white"
                                >
                                    Reset
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Tombol Tambah History Perusahaan */}
                <div className="mb-6">
                    <button
                        onClick={() => setShowModal(true)}
                        className="px-4 py-2 bg-green-600 text-white rounded-md"
                    >
                        Tambah History Perusahaan
                    </button>
                </div>

                {/* Tabel Data History Perusahaan (menggunakan filteredData) */}
                <div className="w-full overflow-x-auto">
                    <Table className="min-w-[1000px] border-collapse">
                        <TableHeader>
                            <TableRow className="border-b border-t bg-green-800">
                                <TableHead className="w-[50px] border-r border-l text-center text-white">
                                    No.
                                </TableHead>
                                <TableHead className="border-r text-center text-white">
                                    Nomor Surat
                                </TableHead>
                                <TableHead className="border-r text-center text-white">
                                    Tanggal Surat
                                </TableHead>
                                <TableHead className="border-r text-center text-white">
                                    Kelompok Kegiatan
                                </TableHead>
                                <TableHead className="border-r text-center text-white">
                                    Keterangan
                                </TableHead>
                                <TableHead className="border-r text-center text-white">
                                    Dokumen
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody className="border-b">
                            {filteredData.length > 0 ? (
                                filteredData.map((item, index) => (
                                    <TableRow
                                        key={item.HistoryPerusahaanId}
                                        className="border-b"
                                    >
                                        <TableCell className="font-medium text-center border-r border-l">
                                            {index + 1}
                                        </TableCell>
                                        <TableCell className="text-center border-r">
                                            {item.NomorHistory || "-"}
                                        </TableCell>
                                        <TableCell className="text-center border-r">
                                            {item.TanggalHistory || "-"}

                                            {/* {item.TanggalHistory
                                                ? new Date(
                                                      item.TanggalHistory
                                                  ).toLocaleDateString(
                                                      "id-ID",
                                                      {
                                                          day: "2-digit",
                                                          month: "long",
                                                          year: "numeric",
                                                      }
                                                  )
                                                : "-"} */}
                                        </TableCell>
                                        <TableCell className="text-center border-r">
                                            {/* Anda bisa menampilkan data dari relasi, misal item.kegiatan?.NamaHistoryKegiatan */}
                                            <div className="flex items-center justify-center">
                                                <button
                                                    onClick={() =>
                                                        handleEdit(item)
                                                    }
                                                    className="px-2 py-1 bg-blue-100 font-normal hover:underline flex items-center gap-1 rounded-md"
                                                >
                                                    <Edit className="h-3 w-3 text-blue-500" />
                                                    {item.history_kegiatan
                                                        ?.NamaHistoryKegiatan ||
                                                        "-"}
                                                </button>
                                            </div>
                                        </TableCell>
                                        <TableCell className="text-center border-r">
                                            {item.KeteranganHistory || "-"}
                                        </TableCell>
                                        <TableCell className="text-center border-r">
                                            <div className="flex items-center justify-center">
                                                {item.DokumenHistory && (
                                                    <a
                                                        href={`/storage/${item.DokumenHistory}`}
                                                        target="_blank"
                                                        className="px-2 py-1 bg-blue-100 font-normal hover:underline flex items-center gap-1 rounded-md"
                                                    >
                                                        <FileText className="h-3 w-3 text-blue-500" />
                                                        Lihat Dokumen
                                                    </a>
                                                )}
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell
                                        colSpan={6}
                                        className="h-24 text-center"
                                    >
                                        Tidak ada data
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

            {/* Modal Tambah History Perusahaan */}
            {showModal && (
                <div className="fixed inset-0 flex items-center justify-center z-50 bg-black/50">
                    <div className="bg-white p-6 rounded-md w-full max-w-md">
                        <h2 className="text-xl font-semibold mb-4">
                            Tambah History Perusahaan
                        </h2>
                        <form
                            onSubmit={handleSubmit}
                            encType="multipart/form-data"
                        >
                            {/* Nomor Surat */}
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Nomor Surat*
                                </label>
                                <input
                                    type="text"
                                    value={data.NomorHistory}
                                    onChange={(e) =>
                                        setData("NomorHistory", e.target.value)
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {errors.NomorHistory && (
                                    <div className="text-red-500 text-sm">
                                        {errors.NomorHistory}
                                    </div>
                                )}
                            </div>

                            {/* Tanggal Surat */}
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Tanggal Surat*
                                </label>
                                <input
                                    type="date"
                                    value={data.TanggalHistory}
                                    onChange={(e) =>
                                        setData(
                                            "TanggalHistory",
                                            e.target.value
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {errors.TanggalHistory && (
                                    <div className="text-red-500 text-sm">
                                        {errors.TanggalHistory}
                                    </div>
                                )}
                            </div>

                            {/* Kelompok Kegiatan */}
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Kelompok Kegiatan*
                                </label>
                                <Select
                                    options={historyKegiatan.map((hk) => ({
                                        value: hk.HistoryKegiatanId.toString(),
                                        label: hk.NamaHistoryKegiatan,
                                    }))}
                                    onChange={(selected) =>
                                        setData(
                                            "HistoryKegiatanId",
                                            selected?.value?.toString() || ""
                                        )
                                    }
                                    placeholder="-- Pilih --"
                                    className="text-sm"
                                />
                                {errors.HistoryKegiatanId && (
                                    <div className="text-red-500 text-sm">
                                        {errors.HistoryKegiatanId}
                                    </div>
                                )}
                            </div>

                            {/* Keterangan */}
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Keterangan
                                </label>
                                <textarea
                                    value={data.KeteranganHistory}
                                    onChange={(e) =>
                                        setData(
                                            "KeteranganHistory",
                                            e.target.value
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {errors.KeteranganHistory && (
                                    <div className="text-red-500 text-sm">
                                        {errors.KeteranganHistory}
                                    </div>
                                )}
                            </div>

                            {/* Upload Dokumen */}
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Upload Dokumen*
                                </label>
                                <input
                                    type="file"
                                    onChange={(e) =>
                                        setData(
                                            "DokumenHistory",
                                            e.target.files
                                                ? e.target.files[0]
                                                : null
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {errors.DokumenHistory && (
                                    <div className="text-red-500 text-sm">
                                        {errors.DokumenHistory}
                                    </div>
                                )}
                            </div>

                            {/* Tombol Aksi */}
                            <div className="flex justify-end mt-6">
                                <button
                                    type="button"
                                    onClick={() => {
                                        setShowModal(false);
                                        reset();
                                    }}
                                    className="px-4 py-2 bg-gray-300 rounded-md mr-2"
                                >
                                    Batal
                                </button>
                                <button
                                    type="submit"
                                    disabled={processing}
                                    className="px-4 py-2 bg-blue-600 text-white rounded-md"
                                >
                                    Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* Modal Edit History Perusahaan */}
            {showEditModal && (
                <div className="fixed inset-0 flex items-center justify-center z-50 bg-black/50">
                    <div className="bg-white p-6 rounded-md w-full max-w-md">
                        <h2 className="text-xl font-semibold mb-4">
                            Edit History Perusahaan
                        </h2>
                        <form
                            onSubmit={handleEditSubmit}
                            encType="multipart/form-data"
                        >
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Nomor Surat*
                                </label>
                                <input
                                    type="text"
                                    value={editData.NomorHistory}
                                    onChange={(e) =>
                                        setEditData(
                                            "NomorHistory",
                                            e.target.value
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {editErrors.NomorHistory && (
                                    <div className="text-red-500 text-sm">
                                        {editErrors.NomorHistory}
                                    </div>
                                )}
                            </div>
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Tanggal Surat*
                                </label>
                                <input
                                    type="date"
                                    value={editData.TanggalHistory}
                                    onChange={(e) =>
                                        setEditData(
                                            "TanggalHistory",
                                            e.target.value
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {editErrors.TanggalHistory && (
                                    <div className="text-red-500 text-sm">
                                        {editErrors.TanggalHistory}
                                    </div>
                                )}
                            </div>
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Kelompok Kegiatan*
                                </label>
                                <Select
                                    options={historyKegiatan.map((hk) => ({
                                        value: hk.HistoryKegiatanId.toString(),
                                        label: hk.NamaHistoryKegiatan,
                                    }))}
                                    value={
                                        historyKegiatan.find(
                                            (hk) =>
                                                hk.HistoryKegiatanId.toString() ===
                                                editData.HistoryKegiatanId
                                        )
                                            ? {
                                                  value: editData.HistoryKegiatanId,
                                                  label:
                                                      historyKegiatan.find(
                                                          (hk) =>
                                                              hk.HistoryKegiatanId.toString() ===
                                                              editData.HistoryKegiatanId
                                                      )?.NamaHistoryKegiatan ||
                                                      "",
                                              }
                                            : null
                                    }
                                    onChange={(selected) =>
                                        setEditData(
                                            "HistoryKegiatanId",
                                            selected?.value?.toString() || ""
                                        )
                                    }
                                    placeholder="-- Pilih --"
                                    className="text-sm"
                                />
                                {editErrors.HistoryKegiatanId && (
                                    <div className="text-red-500 text-sm">
                                        {editErrors.HistoryKegiatanId}
                                    </div>
                                )}
                            </div>
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Keterangan
                                </label>
                                <textarea
                                    value={editData.KeteranganHistory}
                                    onChange={(e) =>
                                        setEditData(
                                            "KeteranganHistory",
                                            e.target.value
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {editErrors.KeteranganHistory && (
                                    <div className="text-red-500 text-sm">
                                        {editErrors.KeteranganHistory}
                                    </div>
                                )}
                            </div>
                            <div className="mb-4">
                                <label className="block font-medium mb-1">
                                    Upload Dokumen
                                </label>
                                <input
                                    type="file"
                                    onChange={(e) =>
                                        setEditData(
                                            "DokumenHistory",
                                            e.target.files
                                                ? e.target.files[0]
                                                : null
                                        )
                                    }
                                    className="border border-gray-300 rounded w-full p-2"
                                />
                                {editErrors.DokumenHistory && (
                                    <div className="text-red-500 text-sm">
                                        {editErrors.DokumenHistory}
                                    </div>
                                )}
                                {/* Tombol Lihat File saat ini */}
                                {editingItem?.DokumenHistory && (
                                    <Button
                                        className="bg-green-100 mt-2"
                                        type="button"
                                        variant="outline"
                                        size="sm"
                                        onClick={() =>
                                            window.open(
                                                `/storage/${editingItem.DokumenHistory}`,
                                                "_blank"
                                            )
                                        }
                                    >
                                        Lihat File saat ini
                                    </Button>
                                )}
                            </div>
                            <div className="flex justify-end mt-6">
                                <button
                                    type="button"
                                    onClick={() => {
                                        setShowEditModal(false);
                                        resetEditForm();
                                    }}
                                    className="px-4 py-2 bg-gray-300 rounded-md mr-2"
                                >
                                    Batal
                                </button>
                                <button
                                    type="submit"
                                    disabled={editProcessing}
                                    className="px-4 py-2 bg-blue-600 text-white rounded-md"
                                >
                                    Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </AuthenticatedLayout>
    );
}
