import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head, usePage, router } from "@inertiajs/react";
import React, { useState } from "react";
import hasAnyPermission from "@/utils/hasAnyPermission";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import Pagination from "@/components/pagination";

export default function RolesIndex() {
    const { roles } = usePage().props;
    const [dialogOpen, setDialogOpen] = useState(false);
    const [roleToDelete, setRoleToDelete] = useState(null);

    const handleDelete = (id) => {
        setRoleToDelete(id);
        setDialogOpen(true);
    };

    const confirmDelete = () => {
        router.delete(`/admin/roles/${roleToDelete}`, {
            onSuccess: () => {
                setDialogOpen(false);
                setRoleToDelete(null);
            },
        });
    };

    return (
        <AuthenticatedLayout header="Kelompok Pengguna">
            <Head title="Kelompok Pengguna" />

            <div className="container mx-auto p-4">
                <div className="row mb-3">
                    <div className="col-md-12">
                        <div className="d-flex justify-content-between align-items-center">
                            {hasAnyPermission(["Roles.index"]) && (
                                <Link
                                    href="/admin/role/create"
                                    className="btn btn-success"
                                >
                                    <i className="bi bi-plus-circle-fill me-2"></i>
                                    Add Role
                                </Link>
                            )}
                        </div>
                    </div>
                </div>

                <div className="card border rounded">
                    <div className="card-body p-0">
                        <div className="table-responsive p-4">
                            <table className="table align-middle">
                                <thead className="table-light">
                                    <tr>
                                        <th scope="col" className="text-center">
                                            No.
                                        </th>
                                        <th scope="col">Role Name</th>
                                        <th scope="col">Permissions</th>
                                        <th scope="col" className="text-center">
                                            Actions
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {roles.data.map((role, index) => (
                                        <tr key={role.id}>
                                            <td className="text-center">
                                                {index +
                                                    1 +
                                                    (roles.current_page - 1) *
                                                        roles.per_page}
                                            </td>
                                            <td>{role.name}</td>
                                            <td>
                                                <div className="d-flex flex-wrap gap-1">
                                                    {role.permissions.map(
                                                        (permission, i) => (
                                                            <span
                                                                key={i}
                                                                className="badge bg-success text-white badge-lg"
                                                            >
                                                                {
                                                                    permission.name
                                                                }
                                                            </span>
                                                        )
                                                    )}
                                                </div>
                                            </td>
                                            <td className="text-center">
                                                {/* {hasAnyPermission([
                                                    "roles.edit",
                                                ]) && ( */}
                                                <Link
                                                    href={`/admin/roles/${role.id}/edit`}
                                                    className="btn btn-primary btn-md me-2"
                                                >
                                                    <i className="bi bi-pencil"></i>{" "}
                                                    Edit
                                                </Link>
                                                {/* )} */}
                                                {/* {hasAnyPermission([
                                                    "roles.delete",
                                                ]) && ( */}
                                                <button
                                                    onClick={() =>
                                                        handleDelete(role.id)
                                                    }
                                                    className="btn btn-danger btn-md"
                                                >
                                                    <i className="bi bi-trash"></i>{" "}
                                                    Delete
                                                </button>
                                                {/* )} */}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        <Pagination links={roles.links} />
                    </div>
                </div>
            </div>

            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Apakah Anda yakin?</DialogTitle>
                        <DialogDescription>
                            Data ini akan dihapus secara permanen!
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button
                            variant="outline"
                            onClick={() => setDialogOpen(false)}
                        >
                            Batal
                        </Button>
                        <Button variant="destructive" onClick={confirmDelete}>
                            Ya, hapus!
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </AuthenticatedLayout>
    );
}
