const RolesTab = ({ state, handlers }) => {
  // ✅ PERBAIKAN: Ambil setShowCreateRoleModal dari state
  const { roles, loading, setShowCreateRoleModal } = state;

  // handlers hanya berisi fungsi logika (API calls)
  const { handleEditRole, handleDeleteRole } = handlers;

  return (
    <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl shadow-xl border border-slate-700">
      <div className="p-6 border-b border-slate-700 flex justify-between items-center">
        <h2 className="text-xl font-semibold text-white">
          🔑 Kelola Role & Hak Akses
        </h2>
        <button
          onClick={() => setShowCreateRoleModal(true)} // Sekarang fungsi ini sudah didefinisikan
          className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition shadow-lg"
        >
          ➕ Tambah Role
        </button>
      </div>

      <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
        {roles.map((role) => (
          <div
            key={role.id}
            className="bg-slate-700/30 border border-slate-600 rounded-xl p-5 hover:border-blue-500 transition"
          >
            <div className="flex justify-between items-start mb-3">
              <div>
                <h3 className="text-lg font-bold text-white capitalize">
                  {role.name}
                </h3>
                <p className="text-sm text-slate-400">{role.description}</p>
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => handleEditRole(role)}
                  className="p-2 bg-yellow-600/20 text-yellow-400 rounded hover:bg-yellow-600/40"
                >
                  ✏️
                </button>
                {/* Jangan izinkan hapus admin/user/manager default jika perlu */}
                {role.name !== "admin" && role.name !== "user" && (
                  <button
                    onClick={() => handleDeleteRole(role.id)}
                    className="p-2 bg-red-600/20 text-red-400 rounded hover:bg-red-600/40"
                  >
                    🗑️
                  </button>
                )}
              </div>
            </div>

            <div className="mt-4">
              <strong className="text-xs text-slate-500 uppercase block mb-2">
                Hak Akses (Permissions):
              </strong>
              <div className="flex flex-wrap gap-2">
                {role.permissions && role.permissions.length > 0 ? (
                  role.permissions.map((perm) => (
                    <span
                      key={perm.id}
                      className="px-2 py-1 bg-blue-500/10 text-blue-300 border border-blue-500/20 rounded text-xs"
                    >
                      {perm.name}
                    </span>
                  ))
                ) : (
                  <span className="text-slate-500 text-xs italic">
                    Tidak ada permission khusus
                  </span>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
window.RolesTab = RolesTab;