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

export default function AnggotaIndex({ anggotas }) {
    const handleDelete = (id) => {
        if (confirm("Yakin ingin menghapus anggota ini?")) {
            router.delete(`/anggota/${id}`);
        }
    };

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

            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <h1 className="text-2xl font-bold text-gray-800">
                        👥 Data Anggota
                    </h1>
                    <Link
                        href="/anggota/create"
                        className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
                    >
                        + Tambah Anggota
                    </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">
                                        Nama
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Email
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        No Telepon
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Tgl Bergabung
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Status
                                    </th>
                                    <th className="px-4 py-3 text-center text-gray-600">
                                        Aksi
                                    </th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-100">
                                {anggotas.data.map((anggota, index) => (
                                    <tr
                                        key={anggota.id}
                                        className="hover:bg-gray-50"
                                    >
                                        <td className="px-4 py-3 text-gray-500">
                                            {(anggotas.current_page - 1) *
                                                anggotas.per_page +
                                                index +
                                                1}
                                        </td>
                                        <td className="px-4 py-3 font-medium">
                                            {anggota.nama}
                                        </td>
                                        <td className="px-4 py-3">
                                            {anggota.email}
                                        </td>
                                        <td className="px-4 py-3">
                                            {anggota.no_telepon ?? "-"}
                                        </td>
                                        <td className="px-4 py-3">
                                            {anggota.tanggal_bergabung}
                                        </td>
                                        <td className="px-4 py-3">
                                            <span
                                                className={`px-2 py-1 rounded-full text-xs font-medium ${
                                                    anggota.status === "aktif"
                                                        ? "bg-green-100 text-green-700"
                                                        : "bg-red-100 text-red-700"
                                                }`}
                                            >
                                                {anggota.status}
                                            </span>
                                        </td>
                                        <td className="px-4 py-3">
                                            <div className="flex items-center justify-center gap-2">
                                                <Link
                                                    href={`/anggota/${anggota.id}/edit`}
                                                    className="text-blue-600 hover:text-blue-800 text-xs bg-blue-50 px-2 py-1 rounded"
                                                >
                                                    Edit
                                                </Link>
                                                <button
                                                    onClick={() =>
                                                        handleDelete(anggota.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 {anggotas.from} - {anggotas.to} dari{" "}
                            {anggotas.total} data
                        </p>
                        <div className="flex gap-1">
                            {anggotas.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>
    );
}
