import MainLayout from "@/Layouts/MainLayout";
import { Head, Link, router } from "@inertiajs/react";

export default function PeminjamanIndex({ peminjamans }) {
    const handleKembalikan = (id) => {
        if (confirm("Konfirmasi pengembalian buku ini?")) {
            router.post(`/peminjaman/${id}/kembalikan`);
        }
    };

    const handleDelete = (id) => {
        if (confirm("Yakin ingin menghapus data ini?")) {
            router.delete(`/peminjaman/${id}`);
        }
    };

    const statusColor = {
        dipinjam: "bg-yellow-100 text-yellow-800",
        dikembalikan: "bg-green-100 text-green-800",
        terlambat: "bg-red-100 text-red-800",
    };

    return (
        <MainLayout>
            <Head title="Data Peminjaman" />

            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <h1 className="text-2xl font-bold text-gray-800">
                        📋 Data Peminjaman
                    </h1>
                    <Link
                        href="/peminjaman/create"
                        className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
                    >
                        + Tambah Peminjaman
                    </Link>
                </div>

                <div className="bg-white rounded-xl shadow overflow-hidden">
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                            <thead className="bg-gray-50 border-b">
                                <tr>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        No
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Anggota
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Buku
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Tgl Pinjam
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Tgl Kembali
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Status
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Denda
                                    </th>
                                    <th className="px-4 py-3 text-center text-gray-600">
                                        Aksi
                                    </th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-100">
                                {peminjamans.data.map((p, index) => (
                                    <tr key={p.id} className="hover:bg-gray-50">
                                        <td className="px-4 py-3 text-gray-500">
                                            {(peminjamans.current_page - 1) *
                                                peminjamans.per_page +
                                                index +
                                                1}
                                        </td>
                                        <td className="px-4 py-3 font-medium">
                                            {p.anggota?.nama}
                                        </td>
                                        <td className="px-4 py-3">
                                            {p.buku?.judul}
                                        </td>
                                        <td className="px-4 py-3">
                                            {p.tanggal_pinjam}
                                        </td>
                                        <td className="px-4 py-3">
                                            {p.tanggal_kembali_rencana}
                                        </td>
                                        <td className="px-4 py-3">
                                            <span
                                                className={`px-2 py-1 rounded-full text-xs font-medium ${statusColor[p.status]}`}
                                            >
                                                {p.status}
                                            </span>
                                        </td>
                                        <td className="px-4 py-3">
                                            {p.denda > 0
                                                ? `Rp ${p.denda.toLocaleString("id-ID")}`
                                                : "-"}
                                        </td>
                                        <td className="px-4 py-3">
                                            <div className="flex items-center justify-center gap-2">
                                                {p.status === "dipinjam" && (
                                                    <button
                                                        onClick={() =>
                                                            handleKembalikan(
                                                                p.id,
                                                            )
                                                        }
                                                        className="text-green-600 hover:text-green-800 text-xs bg-green-50 px-2 py-1 rounded"
                                                    >
                                                        Kembalikan
                                                    </button>
                                                )}
                                                <button
                                                    onClick={() =>
                                                        handleDelete(p.id)
                                                    }
                                                    className="text-red-600 hover:text-red-800 text-xs bg-red-50 px-2 py-1 rounded"
                                                >
                                                    Hapus
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    {/* Pagination */}
                    <div className="px-4 py-3 border-t flex items-center justify-between">
                        <p className="text-sm text-gray-500">
                            Menampilkan {peminjamans.from} - {peminjamans.to}{" "}
                            dari {peminjamans.total} data
                        </p>
                        <div className="flex gap-1">
                            {peminjamans.links.map((link, i) => (
                                <Link
                                    key={i}
                                    href={link.url || "#"}
                                    className={`px-3 py-1 text-sm rounded ${
                                        link.active
                                            ? "bg-indigo-600 text-white"
                                            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                                    }`}
                                    dangerouslySetInnerHTML={{
                                        __html: link.label,
                                    }}
                                />
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </MainLayout>
    );
}
